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(),
)
