These 10 Flutter Widgets Every Developer Should Know
Flutter Knowledge Sharing #20
Programming is a field that you should practice or getting to know something about daily. Otherwise, you will fail in future. In Technology, new things adding day by day. So you need to study that relevant knowledge without living in traditional or old technology. You must refresh day by day. That is relevant to every tiny part. Therefore in Flutter, you should know what you don't know. At least you need to hear about these things will help you definitely in future for the problem-solving.
Flutter is based on widgets. A widget has two things those are the current configuration and the current state. The main widget of the application is the runApp() widget. Other widgets organized at the widget tree. Therefore the runApp() widget is the root always. This concept was inherited from react components. Here I discussed 10 basic widgets which you can use frequently.
What are the widgets, we are going to discuss?
- SafeArea
- Expanded
- Wrap
- Opacity
- FutureBuilder
- FloatingActionButton
- PageView
- Table
- FadeInImage
- StreamBuilder
Let us discuss this one by one, someones with examples and someones with just the functionality. I hope you will get an idea about these widgets.
SafeArea
Use to make the dynamic and adaptive UI for users on different devices. We know that Android and IOS have so many differences between those devices. Then we want to make adaptive and Error-free UIs, we use SafeArea widget. As an example, It’s adding extra padding when necessary. It uses the media query to check the dimension of the screen for make the decisions on that. You would add the following properties to your SafeArea :
const SafeArea({
Key key,
this.left = true,
this.top = true,
this.right = true,
this.bottom = true,
this.minimum = EdgeInsets.zero,
this.maintainBottomViewPadding = false,
@required this.child,
}Expanded
Every Flutter UIs use rows and columns commonly. You can keep components relax or tighten up inside those rows and columns. You can use extra space between children or handle that space as you wish. That time we use this Expanded widget. The expanded widget is similar to the Flexible widget in Flutter. This is a very basic level to make flexible of the widgets. In advance, you must use many other flexibility options.
const Expanded(
{Key? key,
int flex: 1,
required Widget child}
)Here the flex factor determines that how to expand the widget.
Wrap
Rows and columns are greater for laying out widgets. But sometimes you are run out of the room. At that time, The Wrap widget can help you. As the following example. It will arrange extra children vertically or horizontally without any error. You can handle it using the direction property. This is useful when we are using dialogue buttons and chips.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "GFG",
theme: new ThemeData(
primarySwatch: Colors.indigo
),
debugShowCheckedModeBanner: false,
home: WrapW()
);
}
}
class WrapW extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text("Geno Tech"),
),
body: Wrap(
// Key key,
// this.direction = Axis.horizontal,
// this.alignment = WrapAlignment.start,
// this.spacing = 0.0,
// this.runAlignment = WrapAlignment.start,
// this.runSpacing = 0.0,
// this.crossAxisAlignment = WrapCrossAlignment.start,
// this.textDirection,
// this.verticalDirection = VerticalDirection.down,
// this.clipBehavior = Clip.hardEdge,
children: <Widget>[
Container(
color: Colors.red,
width: 150,
height: 50,
child:Center(child: Text("C1",textScaleFactor: 2.5,))
),
Container(
color: Colors.yellow,
width: 150,
height: 50,
child:Center(child: Text("C2",textScaleFactor: 2.5,))
),
Container(
color: Colors.teal,
width: 150,
height: 50,
child:Center(child: Text("C3",textScaleFactor: 2.5,))
),
Container(
color: Colors.blue,
width: 150,
height: 50,
child:Center(child: Text("C4",textScaleFactor: 2.5,))
),
Container(
color: Colors.orange,
width: 150,
height: 50,
child:Center(child: Text("C5",textScaleFactor: 2.5,))
),
],
),
);
}
}output
Opacity
What will happen if your child is deleted? space will collapse and rearranged the rest of the children. After deleting the child, If you want to keep the space remain, you can try with the opacity widget. Another way, you can use the opacity as a property of an image or an animation.
FutureBuilder
FutureBuilder lets you easily determine the current state of a future and show the progress of data loading. Make sure to check the state of the future with connectionState and display an appropriate widget when the state is busy. It’s a good practice to make sure no connection error. There have other connection states which we can check.
- ConnectionState.none
- ConnectionState.active
- ConnectionState.waiting
- ConnectionState.done
FloatingActionButton
FAB is already created when we initiate the application. It’s a widget of the Scaffold main widget. I discussed FloatingActionButton when talking about the Scaffold widget. There you can see the full use of FAB.
PageView
Flutter is easy to create awesome UIs with lots of widgets. But if you want to create views which contain in two pages. You can use this PageView. First, you need a pageController to manage the swipe detection and provide the animation. Then create your pages with the PageView widget and give it the controller with the pages to show. Also, you can set the following properties as your purpose.
PageView({Key key,
Axis scrollDirection,
bool reverse,
PageController controller,
ScrollPhysics physics,
bool pageSnapping,
void Function(int) onPageChanged,
List<Widget> children,
DragStartBehavior dragStartBehavior,
bool allowImplicitScrolling})Table
We can show our list of data using gridviews, but if we want to show those data in a table and without being able to scroll, we use the Table widget. The table provides consistency, you do not need to bother about the size and the position of each element in each row and column. The constructor of the Table class is as follows:
Table({Key key,
List<TableRow> children,
Map<int, TableColumnWidth> columnWidths,
TableColumnWidth defaultColumnWidth,
TextDirection textDirection,
TableBorder border,
TableCellVerticalAlignment defaultVerticalAlignment,
TextBaseline textBaseline})FadeInImage
If you are displaying images downloaded from the network, It’s not a good practice showing empty until it downloads. you can use a FadeInImage widget to show a placeholder(From your assets directory) until you complete the download. You can set the image dimensions early to avoid problems after loading. The sample code snippet will show below.
new Container(
width: MediaQuery.of(context).size.width,
child: new FadeInImage.assetNetwork(
placeholder: 'assets/images/esperanza.jpg',
image: document[_newsImage],
fit: BoxFit.cover,
height: 250.0,
)),StreamBuilder
Nowadays apps are behaving highly asynchronous. Anything can happen anytime in any order. We can handle these data think as streams of data. Dart has support to use this asynchronous stream of data using streams. You can utilize this function on Flutter using StreamBuilder widget. You can use data without any error with this. If there have any error, It also can handle using the snapshot notifier. Here I showing a very simple example for just show the functionality of StreamBuilder widget.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Geno Tech',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
StreamController<int> _events;
@override
initState() {
super.initState();
_events = new StreamController<int>();
_events.add(0);
}
void _incrementCounter() {
_counter++;
_events.add(_counter);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("StreamBuilder Widget"),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Number of Button Pressed :',
),
StreamBuilder(
stream: _events.stream,
builder: (BuildContext context, snapshot) {
return new Text(
snapshot.data.toString(),
style: Theme.of(context).textTheme.display1,
);
},
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Add',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Conclusion
This story gives you the knowledge, top 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! :)
