Create a custom Flutter Text Widget


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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.