Ten Built-in Flutter Widgets You Must Know as a Flutter Developer(4)

Flutter Knowledge Sharing #25

Flutter is a cross-platform development framework for mobile and web developers, which was developed and maintained by Google. It’s not
actually new. Flutter is based on widgets. Widgets are the building blocks of an application in Flutter development. Therefore you should have a clear knowledge of widgets. Here We are going to discuss a different set of widgets that are more important and used commonly. As a software engineer or a software developer, you would use this knowledge definitely. I am not providing too much information on these widgets. But what you want exactly. Therefore you can get a clear idea in just a few minutes.

Widgets that you are going to learn

1. AnimatedSwitcher
2. Semantics
3. AnimatedPadding
4. IndexedStack
5. AnimatedPositioned
6. ConstrainedBox
7. Stack
8. AnimatedOpacity
9. FractionallySizedBox
10. ListView

Let us discuss this one by one with examples and someones with the functionality. I hope you will get an idea about these widgets.

AnimatedSwitcher

Do you want to switch between two widgets with a snazzy animation, as you transition? AnimatedSwitcher is the solution. First set the widget you want to animate as the child of the AnimatedSwitcher. Next, set the duration for how long the transition should happen. Then when you want to animate to another widget, change the value of the previous widget to a new one using setState. Everything other needs will do by the AnimatedSwitcher. By default, there has a fadeTransition. You can change it by using the TranstionBuilder parameter to something else. such as scaleTransiton, rotationTransition etc.

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      AnimatedSwitcher(
        duration: const Duration(milliseconds: 5000),
        transitionBuilder: (Widget child, Animation<double> animation) {
          return ScaleTransition(child: child, scale: animation);
        },
        child: Text(
          '$_count',
          key: ValueKey<int>(_count),
          style: Theme.of(context).textTheme.display1,
        ),
      ),
      RaisedButton(
        child: const Text('Increment'),
        onPressed: () {
          setState(() {
            _count += 1;
          });
        },
      ),
    ],
  );
}

Semantics

Flutter also has a built-in widget that describes what the piece of the UI means. Therefore the widget calls Semantics. You can provide that information by wrapping each widget with semantics. Semantics has a set of properties for a text description, whether the widget should be considered enabled or disabled, whether it represents an input element or a read-only field. You will wonder there have more than 50 properties to provide additional meaning for your UI.

AnimatedPadding

We can animate something in many ways and Flutter has several widgets to achieve animations. This is the perfect way to set buffers and spaces between widgets and screen borders. But if you want dynamically change the padding of a widget and have it animate between the two padding insets? You need to use the AnimatedPadding widget. First, wrap the widget you want to animate using the AnimatedPadding widget. Give a value to padding inset variable in double type. You will use this to trigger the animation when its value changes. Then, provide the duration of the animation. which dictates how quickly the padding animation will change. Next, you can specify the curve of the animation to achieve different animation effects. Now, whenever the padding variable changes, the padding will animate.

IndexedStack

Do you want your users to easily swap between widgets in your app? IndevedStack can do that task. It shows only one child at a time, but preserve the state of all the children. To use this, just wrap the children inside the IndexedStack widget. Then add an index parameter with the variable that can be changed. Something like setState. Then you can switch between widgets with ease. This is an extended version of the Stack widget. So you can use every property of the Stack widget as usually.

AnimatedPositioned

The sliding feature is important because it has using in applications frequently. From slider itself, all the way up to dismissable and draggable. If you are looking to implement your own though, a good widget to know is AnimatedPositioned. It fits into Stack’s list of children, just like a regularly positioned widget. And, just like position, it will put its child exactly where you want it. The difference is that if you rebuild AnimatedPositioned with different height or width, directions, it will animate the change automatically. This is great for reveal effects and other sliding tricks. Additionally, because all of the directional properties are used in the animation, your widget can grow and shrink as part of it.

ConstrainedBox

ContstrainedBox uses to specify fixed sizes for its children widgets. There has to mention the maximum or minimum height and width of child widgets.

child: ConstrainedBox(
  constraints: BoxConstraints.expand(height: 200, width: 200),
  child: Container(
    color: Colors.blue,
  ), //Conatiner widget
),

Stack

We are using container-based layouts always. If you’ve ever wanted overlapping widgets, then Sack is the widget you should use. The stack holds a set of widgets and renders them from bottom to top(One on top of the other). It’s sized by default to fit all of its unpositioned children. I have discussed the Stack widget completely here.

AnimatedOpacity

This is another widget to use to create animations implicitly. In some cases, you want to change how the widget visible to the users. Either by fading into view or by making it less prominent when something unselected yet. For all these situations, we use AnimatedOpacity. First, wrap the widget you want to animate within the AnimatedOpacity widget. Then set the duration for how long you want to see the transition between opacity to last. Then set the opacity parameter, control by a variable and that can be changed by using a setState. An opacity is zero means completely invisible. You can set a value between 0 to 1.

FractionallySizedBox

Sometimes your design calls for dimensions that are relative. For example, a button should take 60% of screen width or a margin takes 10% of the widget. FractionallySizedBox can achieve in that case. First, wrap the child inside the FractionallySizedBox. And give the widthFactor 0.7 means 70% of the available size of the width. And you can use the alignment to mention where exactly the fractional widget will be. You can use FractionallySizedBox without any child to make a space between others.

child: FractionallySizedBox(
  widthFactor: 0.6,
  heightFactor: 0.25,
  child:  RaisedButton(
    child: Text('Geno Tech'),
    color: Colors.green,
    textColor: Colors.white,
    onPressed: () {
    },
  ),
),

ListView

Typically we use Listview we need to appear a set of items on a scrollable list. Flutter ListView widget is available to do it. At its simplest, You give it a list of items, and it handles the rest. It’s all customizable. Scroll direction, reverse approach, disable the scrollable, and many other properties. Here I show you a simple example below.

ListView.builder(
    itemCount: 5,
    itemBuilder: (BuildContext context,int index){
      return ListTile(
          leading: Icon(Icons.account_circle_outlined),
          trailing: Text("View",
            style: TextStyle(
                color: Colors.blue,fontSize: 15),),
          title:Text("Person Number $index")
      );
    }
),

Image: ListView widget example

Conclusion

This story gives you the knowledge, another top ten Flutter widgets you should know. I have written another 10 important widgets here and here. 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! :)