Using DECORATORS in FLUTTER (2021)

In this tutorial, we’ll be Using DECORATORS in FLUTTER (2021) to develop an application with widgets.

Decorators help to convey a message depending on the user’s action or customize the look and feel of a widget. There are different types of decorators for each task.

  • Decoration—The base class to define other decorations.
  • BoxDecoration—Provides many ways to draw a box with borderbody, and boxShadow.
  • InputDecoration—Used in TextField and TextFormField to customize the border, label, icon, and styles. This is a great way to give the user feedback on data entry, specifying a hint, an error, an alert icon, and more.

BoxDecoration class (Figure 1.01) is a great way to customize a Container widget to create shapes by setting the borderRadiuscolorgradient, and boxShadow properties.

Illustration of BoxDecoration applied to a Container.
FIGURE 1.01: BoxDecoration applied to a Container
// BoxDecoration
Container(
 height: 100.0,
 width: 100.0,
 decoration: BoxDecoration(
  borderRadius: BorderRadius.all(Radius.circular(20.0)),
  color: Colors.orange,
  boxShadow: [
   BoxShadow(
    color: Colors.grey,
    blurRadius: 10.0,
    offset: Offset(0.0, 10.0),
   )
  ],
 ),
),

The InputDecoration class (Figure 1.02) is used with a TextField or TextFormField to specify labels, borders, icons, hints, errors, and styles. This is helpful in communicating with the user as they enter data. For the border property shown here, I am implementing two ways to customize it, with UnderlineInputBorder and with OutlineInputBorder:

Illustration of InputDecoration with OutlineInputBorder and default border.
FIGURE 1.02: InputDecoration with OutlineInputBorder and default border
// TextField
TextField(
 keyboardType: TextInputType.text,
 style: TextStyle(
  color: Colors.grey.shade800,
  fontSize: 16.0,
 ),
 decoration: InputDecoration(
  labelText: "Notes",
  labelStyle: TextStyle(color: Colors.purple),
  //border: UnderlineInputBorder(),
  border: OutlineInputBorder(),
    
 ),
),

// TextFormField
TextFormField(
 decoration: InputDecoration(
  labelText: 'Enter your notes',
 ),
),

TRY IT OUT   

CONTINUING THE IMAGES PROJECT BY ADDING DECORATORS IN FLUTTER

Add the BoxDecoratorWidget() and InputDecoratorsWidget() widget classes.

1. Add the widget class names BoxDecoratorWidget() and InputDecoratorsWidget() after the ImagesAndIconWidget() widget class. Add a Divider() widget between each widget class name

body: SafeArea(
 child: SingleChildScrollView(
  child: Padding(
   padding: EdgeInsets.all(16.0),
   child: Column(
    children: <Widget>[
     const ImagesAndIconWidget(),
     Divider(),
     const BoxDecoratorWidget(),
     Divider(),
     const InputDecoratorsWidget(),
    ],
   ),
  ),
 ),
),

2. Add the BoxDecoratorWidget() widget class after the ImagesAndIconWidget() widget class. The widget class returns a Padding widget with the Container widget as a child. The Containerdecoration property uses the BoxDecoration class. Using the BoxDecorationborderRadiuscolor, and boxShadow properties, you create a rounded button shape such as the one in Figure 1.01.

class BoxDecoratorWidget extends StatelessWidget {
 const BoxDecoratorWidget({
  Key key,
 }) : super(key: key);

 @override
 Widget build(BuildContext context) {
  return Padding(
   padding: EdgeInsets.all(16.0),
   child: Container(
    height: 100.0,
    width: 100.0,
    decoration: BoxDecoration(
     borderRadius: BorderRadius.all(Radius.circular(20.0)),
     color: Colors.orange,
     boxShadow: [
      BoxShadow(
       color: Colors.grey,
       blurRadius: 10.0,
       offset: Offset(0.0, 10.0),
      )
     ],
    ),
   ),
  );
 }
}

3. Add the InputDecoratorsWidget() widget class after the BoxDecoratorWidget() widget class. You take a TextField and use TextStyle to change the color and fontSize properties. The InputDecoration class is used to set the labelTextlabelStyleborder, and enabledBorder values to customize the border properties. I am using the OutlineInputBorder here, but you could also use the UnderlineInputBorder class instead. I left borderUnderlineInputBorder and enabledBorderOutlineInputBorder() commented out, allowing you to test both classes.The following code adds two TextField widgets customized by two different decorations. The first TextField customizes different InputDecoration properties to show a purple notes label with the OutlineInputBorder(). The second TextField widget uses the decoration without customizing the border property.

class InputDecoratorsWidget extends StatelessWidget {
 const InputDecoratorsWidget({
  Key key,
 }) : super(key: key);

 @override
 Widget build(BuildContext context) {
  return Column(
   children: <Widget>[
    TextField(
     keyboardType: TextInputType.text,
     style: TextStyle(
      color: Colors.grey.shade800,
      fontSize: 16.0,
     ),
     decoration: InputDecoration( 
      labelText: "Notes",
      labelStyle: TextStyle(color: Colors.purple),
      //border: UnderlineInputBorder(),
      //enabledBorder: OutlineInputBorder(borderSide: BorderSide(color.Colors.purple)),
      border: OutlineInputBorder(),
     ),
    ),
    Divider(
     color: Colors.lightGreen,
     height: 50.0,
    ),
    TextFormField(
     decoration: InputDecoration(labelText: 'Enter your notes'),
    ),
   ],
  );
 }
} 

“While still editing the home.dart file, you'll add the BoxDecoratorWidget() and InputDecoratorsWidget() widget classes.”

HOW IT WORKS

Decorators are invaluable to enhance the look and feel of widgets. The BoxDecoration provides many ways to draw a box with borderbody, and boxShadow. The InputDecoration is used in either a TextField or TextFormField. Not only does it allow the customization of the borderlabelicon, and stylesIt also gives users feedback on data entry with hints, errors, icons, and more.

Learn more about FLUTTER

Written by

XR Developer responsible for end-to-end development of XR solutions spanning multiple domains, by using various XR and WebXR libraries.

Leave a Reply