A Custom Widget can be composed of many widgets , in our Neat Textbox widget we used Decorated Box, BoxDecoration and Padding.
To make new widget first have to extend a class from StatelessWidget and then provide final variables , constructor and build method
The build method is the heart of any widget
Our NeattextBox accepting Text Styles ,so we have a final variable styl, it help us to use different font, color and other style properties
Padding used to adjust distance the boarder using EdgeInsets , also se the alignment of the Text. You can also utilize other BoxDecoration property as you wish
NeattexBox Widget
class NeattextBox extends StatelessWidget { final String title; final TextStyle styl; const NeattextBox({Key key, @required this.title, this.styl}) : super(key: key); @override Widget build(BuildContext context) { return DecoratedBox( decoration: BoxDecoration(color: Colors.white), child: Padding( padding: const EdgeInsets.all(8.0), child: Text( title, textAlign: TextAlign.left, style: styl, ), )); } }
How to use the New Box
Here is the sample code implement the widget with styl
NeattextBox( styl: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, color: Colors.deepOrangeAccent), title: "Dead :" + dist.status.deceased.toString(), )