Many people say that Flutter has a steep learning curve. If you have seen Flutter UI layout code, you may be inclined to agree with them. Yet, the Flutter learning curve is quite hard if you try to do too much at once. Just take your time and discover everything that laid inside this framework, to be more specific, concepts. One of the first concepts that you encounter in Flutter is Flutter widgets.
Whenever you are going to code for building anything in Flutter, it will be inside a widget. The central purpose is to build the app out of widgets. It describes how your app view should look like with their current configuration and state. When you made any alteration in the code, the widget can determine the minimal changes for rendering in the UI of the app. So now, we would like to show you the different types of Flutter widgets and how to create a widget.
But first, let’s start with the definition.
Flutter widgets are just pieces of your user interface. If you are familiar with Android or iOS development, then you will make the immediate connection to views (for Android) and UIViews (for iOS). This is a good comparison to make and you will do fine to start your journey with this mindset. A more accurate way to think, though, is that a widget is a blueprint. Flutter uses these blueprints to build the view elements under the hood and render them to the screen.
The different types of widgets
Widgets are immutable. That is, they cannot be changed. Any properties that they contain are final and can only be set when the widget is initialized. This keeps them lightweight so that it’s inexpensive to recreate them when the widget tree changes. There are two types of widgets: stateless and stateful.
1. Stateless Flutter widgets
Stateless widgets are widgets that don’t store any state. That is, they don’t store values that might change. For example, an Icon is stateless; you set the icon image when you create it, and then it doesn’t change any more. A Text widget is also stateless. If you want to change the text value, you just create a whole new widget with the new text. The Text Flutter widgets don’t store a text property that can be changed.
2. Stateful Flutter widgets
The second type of widget is called a stateful widget. That means it can keep track of changes and update the UI based on those changes. The stateful widget itself is immutable, but it creates a State object that keeps track of the changes. When the values in the State object change, it creates a whole new widget with the updated values. So the lightweight widget gets recreated but the state persists across changes.
>>> Also read: Flutter layouts: Simple guide to build them for your project
Next, we are going to get our hands dirty with some easy examples of common Flutter widgets. We highly recommend that you follow along and run the code in your editor. First, start a new Flutter application project. We called my project flutter_widget_examples, but you can call yours whatever you want. Then open the main.dart file. It’s in the lib folder in your project outline. After that, delete all the text in this file and replace it with:
void main() {}
If you hot reload your app now it should be a blank screen. The main() function is the starting point for every Flutter app. Right now ours does nothing, but in each of the examples below, we will be testing different Flutter widgets here.
1. Container widget
The first one of Flutter widgets we are going to play with is called a Container. As you might have guessed from the name, it’s a holder for other widgets. But we aren’t going to put anything else in it to start with. We will just play with its color property. Replace all the code in main.dart with the following:
// importing this package gives us the dart widgets
// as well as the Material Theme widgets
import 'package:flutter/material.dart';// the main() function is the starting point for every Flutter project
void main() {// calling this method (you guessed it) runs our app
runApp(// runApp() takes any widget as an argument.
// This widget will be used as the layout.
// We will give it a Container widget this time.
Container(
color: Colors.green, // <-- change this
),);
}
2. Text widget
Probably every single app that you make will have text, so the Text widget is definitely one that we need to look at. We added some boilerplate code with explanations. You don’t have to pay too much attention to it, though. Using the MaterialApp widget makes the app look nicer and makes the rest of the code simpler. Also, having the build() method lets us use a hot reload to update after changes.
Replace all the code in main.dart with the following code. Pay special attention to the myWidget() method at the bottom. We will use it to return the Text widget that we are playing with here. In the following examples of Flutter widgets, you will only need to replace this method.
import 'package:flutter/material.dart';void main() {
// runApp() is a builtin method that initializes the app layout
// MyApp() (see below) is a widget that will be the root of our application.
runApp(MyApp());
}// the root widget of our application
class MyApp extends StatelessWidget {// The build method rebuilds the widget tree if there are any changes
// and allows hot reload to work.
@override
Widget build(BuildContext context) {// This time instead of using a Container we are using the MaterialApp
// widget, which is setup to make our app have the Material theme.
return MaterialApp(// The Scaffold widget lays out our home page for us
home: Scaffold(// We will pass an AppBar widget to the appBar property of Scaffold
appBar: AppBar(
// The AppBar property takes a Text widget for its title property
title: Text("Exploring Widgets"),
),// The body property of the Scaffold widget is the main content of
// our screen. Instead of directly giving it a widget we are going
// to break it out into another method so that things don't get
// too messy here.
body: myWidget(),),
);
}
}// This is where we will play with the Text widget
Widget myWidget() {
return Text(
"Hello, World!",
);
}
3. Button widget
If you have been doing the code along with us, your confidence should be increasing. It really isn’t that hard to make widgets, is it? Buttons are another common need and Flutter has several types of button widgets. Although we are not doing anything in response to the button click in this tutorial of Flutter widgets, you can see in the code below where you could do something.
Widget myWidget() {
return RaisedButton(
child: const Text('Button'),
color: Colors.blue,
elevation: 4.0,
splashColor: Colors.yellow,
onPressed: () {
// do something
},
);
} 4. TextField widget
For accepting user text input you use a TextField widget. Now that you already have experience with the widgets above, this one is simple. You just click in the TextField and the system keyboard automatically pops up.
Widget myWidget() {
return TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Write something here'
),
);
}
5. ListView widget
The most common way to display lots of data is with a ListView. Now, we have research lists before with Android RecyclerViews and iOS TableViews and we have to say that Flutter is way too easy. The stories that you have heard about Flutter widgets having a steep learning curve may have been overrated.
Widget myWidget() {
return ListView.builder(
padding: EdgeInsets.all(16.0),
// spacing of the rows
itemExtent: 30.0,
// provides an infinite list
itemBuilder: (BuildContext context, int index) {
return Text('Row $index');
},
);
} What if you want the rows to respond to user taps? Then fill the rows with a ListTile widget instead of a plain Text widget. This also adds nice spacing, so we can take out the extra padding and item extent from the code above of Flutter widgets.
Final words
To conclude that, this article shows you the different types of Flutter widgets and how to create one of them for your eCommerce application. All in all, widgets are the basic building blocks of Flutter apps. You can think of them as blueprints for telling Flutter how you want the UI to look. And regarding that incomprehensible block of code at the beginning of the tutorial, the solution is to break complex layouts into smaller pieces by using variables, methods, or classes. Moreover, in case you have any questions, let’s CONTACT US immediately.
