Five Flutter Widgets You Must Know

Published in

App Dev Community

5 min readMay 23, 2021

Flutter Knowledge Sharing #31

Welcome to my next Flutter knowledge sharing story. This is the 30th story about Flutter. We have discussed all important topics with enough coding examples. Flutter is a most emerging front end development framework developed by Google. Dart is the programming language that we can use with Flutter. Widgets are the main building blocks of Flutter.

If you want to be an expert in Flutter, knowledge about Widgets is a must. Here I will discuss 5 important built-in widgets. With the use of these, you can build very beautiful widgets as your UI designer expects from you.

Widgets, Widgets, Widgets?

Divider
IgnorePointer
GridView
InteractiveViewer
SliverAppBar

Let’s discuss each one with attributes, use cases and examples.

Divider

When two widgets need some space for each other, it can be helpful to draw a line between them. Thes Divider widget appears as a horizontal widget where you use it. That’s how we use this widget. You can customize the widget using the following attributes. You can change how much space the divider takes up with the height property. How thick it is? with the thickness property. You can change also the colour, add some leading space with Indent, trailing space with endIndent. It can feel redundant to specify these properties everywhere for each and every divider. So, when you want a consistent look and feel for all of them, consider setting up a DividerThemeData in your MaterialApp. The divider is useful when you want to separate the set of widgets.

Divider(
  height: 10.0,
  indent: 5.0,
  thickness: 3,
  color: Colors.black87,
),

IgnorePointer

Sometimes it’s useful to prevent the user from interacting with parts of the app. For example, if your app radically changes the UI at some point and there’s a chance that the user tap on something they didn’t want to. When UI changes under users’ fingers, that’s actually a pretty common and frustrating problem. You could address this problem with all interactive elements in your app one by one when UI changes happen or you can use IgnorePointer. Just wrap the part of the app that you want to briefly protect from the user’s fingers in IgnorePointer and specify whether you want to ignore it or not. IgnorePointer ignores all pointer-events clicking, tapping, dragging, scrolling and everything. And it does for the whole sub-tree. So you need to put an IgnorePointer above everything else in your app.

const IgnorePointer({
  Key key,
  this.ignoring = true,
  this.ignoringSemantics,
  Widget child,
})

GridView

When you create a complex layout with multiple rows and columns, There is an easier way to create a grid. GridView basically does just that. There are many GridView constructors. I will show an example that using the builder() constructor. You can use many properties to customize your grid view.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter GridView Widget"),
          backgroundColor: Colors.blue,
        ),
        body: Container(
            padding: EdgeInsets.all(12.0),
            child: GridView.builder(
              itemCount: images.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 4.0,
                  mainAxisSpacing: 4.0
              ),
              itemBuilder: (BuildContext context, int index){
                return images[index];
              },
            )),
      ),
    );
  }
}

InteractiveViewer

Screens are often smaller than what you want to show on them. For examples, a big table or big image won’t fit on a phone screen in all its glory. This problem will solve by the InteractiveViewer widget. Just build your big widget and wrap it using InteractiveViewer. Now the user can zoom in and zoom out of the widget and pan around. By default, InteractiveViewer will constrain the size of its child, making it squeeze inside. But, by setting the constrained property to false, you can let the inner widget size itself, even if that means, some part of it will not be visible at first. There have other properties to do customizations.

class _InteractiveViewerExample extends StatelessWidget {
  
  static Matrix4 matrix4 = Matrix4(
      2, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
  );
  TransformationController controller = TransformationController(matrix4);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter InteractiveViewer Widget'),
      ),
      body: Center(
        child: InteractiveViewer(
          transformationController: controller,
          child: Image.asset('assets/GEOA.png'),
          onInteractionStart: (ScaleStartDetails scaleStartDetails) {
            print('Interaction Start - Focal point: ${scaleStartDetails.focalPoint}'
                ', Local focal point: ${scaleStartDetails.localFocalPoint}'
            );
          },
          onInteractionEnd: (ScaleEndDetails scaleEndDetails) {
            print('Interaction End - Velocity: ${scaleEndDetails.velocity}');
          },
          onInteractionUpdate: (ScaleUpdateDetails scaleUpdateDetails) {
            print('Interaction Update - Focal point: ${scaleUpdateDetails.focalPoint}'
                ', Local focal point: ${scaleUpdateDetails.localFocalPoint}'
                ', Scale: ${scaleUpdateDetails.scale}'
                ', Horizontal scale: ${scaleUpdateDetails.horizontalScale}'
                ', Vertical scale: ${scaleUpdateDetails.verticalScale}'
                ', Rotation: ${scaleUpdateDetails.rotation}'
            );
          },
        ),
      ),
    );
  }
}

SliverAppBar

SliverAppBar has given you the ability to have an app bar that grows and shrinks as you scroll a list up and down. You also can create a flexible area that expands to a given height using the expandedHeight and flexibleSpace properties. But what happens to the silverAppBar, when you reach the top of the list of silvers?. To give an app bar room stretch, set the stretch property to true. By default, the flexibleSpaceBar will zoom its background. But, you can override with the stretchMode property. Maybe the explicitly zooming the background, as well as blurring it out or moving the title into the flexibleSpaceBar and having it disappear with the stretch.

body: CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text("Sample Slivers"),
      leading: Icon(Icons.menu),
      backgroundColor: Colors.orangeAccent,
      floating: true,
    ),
    SliverList(
      delegate: SliverChildListDelegate([
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 1"),),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 2")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 3")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 4")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 5")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 6")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 7")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 8")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 9")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 10")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 11")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 12")),
        ListTile(leading: Icon(Icons.adjust), title: Text("List View - Item 13")),

      ]),
    )
  ],

),

Conclusion

This is the sixth story about flutter widgets. Up to now, I have discussed 55 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! :)