Flutter Is Based on Widgets: Ten Widgets Every Software Developers Must Know

Flutter Knowledge Sharing #26

Published in

App Dev Community

7 min readMay 8, 2021

Welcome to another Flutter knowledge sharing story. Flutter is based on widgets. Therefore you must a fluent knowledge in widgets. Here I explained the functionalities, attributes, and their usages of each widget with simple examples. You can easily get a good knowledge about these widgets. I have discussed 40 widgets so far. please checkout my previous articles for get to know about them. If you are hoping to be the best developer in Flutter, This will help you definitely. Here I explained ten widgets that comes built-in with Flutter SDK. I have nothing to say more. Also, we have to save time which is most important. Now, let us discuss the topic.

Widgets, Widgets, Widgets?

Container
SelectableText
DataTable
Slider
AlertDialog
DraggableScrollableSheet
ColorFiltered
ToggleButtons
DefaultTabController & TabBar
Drawer

Container

Do you want a widget that needs some background styling in Flutter? Maybe a background colour, shape, or size constraints? Try to wrap it in Container widgets. This widget helps you to compose, decorate, and position child widgets. If you wrap in a container widget, without any other parameters, you won’t notice any difference. You need to add the parameters to change the appearance. You can use the following properties with Container.

Container({
  Key key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double width,
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform,
  this.child,
  this.clipBehavior = Clip.none,
})

SelectableText

If you want to display a text, in your app selectable. SelectableText will give you exactly that option. SelectableText has all the fields in the Text widget. So you can decorate the text using font, colour etc. You can show where your selection would start with the ShowCursor parameter. Customize the appearance of the cursor using the cursorWidth, cursorRadius, sursorColour parameters. To specify what actions are available after selecting the text, use the toolbar option. By default, you can select and copy it. You can add an onTap handler to respond to a single tap gesture.

child: SelectableText(
  '10 Flutter Widgets you must know as a Flutter Developer',
  style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 20),
  textAlign: TextAlign.center,
  showCursor: true,
  cursorWidth: 2,
  cursorColor: Colors.black,
  cursorRadius: Radius.circular(2),
),

DataTable

Do you have some important data to represent to your users? Use data table. The widget allows you to build a table that automatically sizes its columns, According to what's in the cells. You can see an example below.

DataTable(
  columns: [
    DataColumn(label: Text('IndexNo')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Result')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('1')),
      DataCell(Text('Ashley')),
      DataCell(Text('A')),
    ]),
    DataRow(cells: [
      DataCell(Text('2')),
      DataCell(Text('John')),
      DataCell(Text('B-')),

    ]),
    DataRow(cells: [
      DataCell(Text('3')),
      DataCell(Text('Tony')),
      DataCell(Text('A')),
    ]),
  ],
),

You can use the following properties.

({
  Key key,
  @required this.columns,
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowColor,
  this.dataRowHeight,
  this.dataTextStyle,
  this.headingRowColor,
  this.headingRowHeight,
  this.headingTextStyle,
  this.horizontalMargin,
  this.columnSpacing,
  this.showCheckboxColumn = true,
  this.showBottomBorder = false,
  this.dividerThickness,
  @required this.rows,
})

Slider

You can select a value between any range using the Slider widget. The Slider widget selects a single value from a range. set the required onChange function to respond to user interactions. Mention the max and min variable values to select the range. A slider with divisions will stick at certain points. Use the division parameters to set the number of points that the slider will stick to. Setting the label parameter shows a label above the slider while it's being a drag. The RangeSlider widget uses to select two values of the range.

Slider(
  value: _initvalue.toDouble(),
  min: 1.0,
  max: 10.0,
  divisions: 10,
  activeColor: Colors.green,
  inactiveColor: Colors.orange,
  label: 'Set value',
  onChanged: (double newValue) {
    setState(() {
      _initvalue = newValue.round();
    });
  },
)

AlertDialog

Does your app have a state where your user needs to get a decision? Do you want to alert someone about something? or maybe get user input?. Try using an AlertDialog. Depending on your UI design, you can customize it.

AlertDialog(
  title: new Text('Confirm Exit...!!!'),
  actions: <Widget>[
    FlatButton(
      child: Text(
        "Yes",
        style: Theme.of(context)
            .textTheme
            .caption
            .copyWith(fontWeight: FontWeight.w600, color: Colors.blue),
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    FlatButton(
      child: Text(
        "No",
        style: Theme.of(context)
            .textTheme
            .caption
            .copyWith(fontWeight: FontWeight.w600, color: Colors.blue),
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

DraggableScrollableSheet

If you want to swipe a widget into view, and you need that widget to be scrollable when it’s on-screen. So, to achieve these both at once you can use DraggableScrollableSheet. First, provide a builder argument. The builder should return a scrollable widget like a Listview. You also can specify the minimum and maximum sizes of the widget initially. There are defined as a fraction of the available space. Get to know more with the following example.

DraggableScrollableSheet(
  builder: (BuildContext context, ScrollController scrollController){
    return Container(
      color: Colors.white,
      child: ListView.builder(
          controller: scrollController,
          itemCount: 20,
          itemBuilder: (BuildContext context, int index){
            return ListTile(title : Text('Item $index'),);
          }),
    );
  },
)

Image: DraggableScrollableSheet widget example

ColorFiltered

It’s easy to change the colour of most widgets. But sometimes it’s not easy to change as a parameter. For a example, would you do if you wanted to play around with the colour of an image?. Colour parameter is not enough at that moment. At that time, we can use the ColorFiltered widget. You can try with different filters. You can also use it in bunch of widgets. This is a simple example that mixed the red colour to the image.

ColorFiltered(
  colorFilter:  ColorFilter.mode(Colors.red, BlendMode.colorBurn),
  child: Image.asset('assets/GEOA.png'),
),

ToggleButtons

Do you want to let your users select from a number of related options?. Ass toggle buttons to your app to do just that. To build your toggle buttons, provide a list of the widgets, you want to use for this set of buttons. Cext, set the isSelected parameter, this holds a list of booleans that’s the same length as your widget list. It will control which buttons are selected. Here we control what buttons are selected with a variable inside a stateful widget. Finally, build a onpressed method to respond when user select a button. Additionally you can customize more and more.

List<bool> _isSelected = [false, true, false];ToggleButtons(
  children: <Widget>[
    Icon(Icons.highlight_rounded),
    Icon(Icons.bluetooth),
    Icon(Icons.wifi),
  ],
  isSelected: _isSelected,
  onPressed: (int index) {
    setState(() {
      _isSelected[index] = !_isSelected[index];
    });
  },
),

DefaultTabController & TabBar

Typically we use tab views in our applications. We can achieve it with DefaultTabController, TabBar and TabBarView widgets in Flutter. To use tabs, first need a tab controller to keep the selected tab, and the visible content is sync. The easiest way to do this with the DefaultTabController. Once you have that, you will need a widget to show the tabs that the user would use to switch the different sections. The TabBar takes a list of tab widgets. you can have the tab show text, an icon, or specify a child widget. Finally you need to create content for each tab.

Drawer

Drawer provides navigation to other pages. It’s a widget that we can use inside a Scaffold widget. I discussed this in sccafold widget story which I published here before.

Scaffold Class: Every Flutter Programmer Should Know

Flutter knowledge sharing #10

medium.com

Conclusion

This is the fifth story about flutter widgets. Upto now I have discussed 50 Flutter widgets.

This story gives you the knowledge, another ten Flutter widgets you should know. I hope you will use those in your next Flutter project. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)