Flutter is Google’s UI toolkit for crafting beautiful, natively compiled iOS and Android apps using a single code base. The Flutter app is designed using widgets – These are the basic building blocks of every Flutter application. Widgets describe what the app UI should look like given its current configuration and state.
There are multiple Flutter widgets, the articles give you a quick look into the basic Flutter widgets, types, and categories.
Flutter has become a star in the eyes of Android and iOS developers by empowering them to build cross-platform apps using a single codebase. The technology seems to be successfully overcoming the three big challenges in app development.
All that brings much relief for the developer's community as they now have more time for creative things in app development.
Well, now we know how useful Flutter is for smoothly building beautiful cross-platform apps. Let's know about the basic building blocks of the Flutter application known as Flutter widgets.
Each element on the Flutter UI is a widget such as text, container, image, button, animations, and motions. So, the view of a screen completely depends on the choice and the sequence of the Flutter widgets used in building the application. Therefore the structure formed by the application code is called a tree of widgets.
These widgets can be classified into the following fourteen categories according to the functionality they provide in the Flutter application.
Category | Description |
---|---|
Accessibility | Makes the app more accessible. |
Animation and motions | Add animation to the widgets. |
Assets image and icon | Manage assets, display images, and show icons. |
Async | Provides async functionality to the Flutter application. |
Basics | Essential widgets for the Flutter application development. |
Cupertino | Beautiful and high-fidelity widgets for iOS styling. |
Input | Take user input in addition to input widgets in Material Components and Cupertino. |
Interaction Models | Respond to touch events and route users to different views. |
Layout | Arranges other widgets, columns, rows, grids, and other layouts. |
Material Components | Visual, behavioral, and motion-rich widgets that follow material design guidelines. |
Painting and Effects | Set of widgets that add visual changes to their child widgets without changing their layout and shape. |
Scrolling | Scrolls multiple widgets as the children of the parents. |
Styling | It deals with the theme, responsiveness, and sizing of the app. |
Text | It displays and styles text. |
In general Flutter widgets are classified into two categories,
However, you can find more classes in the hierarchy of Flutter sources.
StatelessWidget: The widget does not require a mutable state.
StatefulWidget: The widget has a mutable state i.e state information can be read synchronously when it is built and it may change during the widget's lifetime. Therefore it's essential to ensure that the state is promptly notified when the change occurs using setState.
ProxyWidget: The Widget has a child widget provided to it, instead of building a new widget. It is useful as a base class for other widgets like InheritedWidget and ParentDataWidget.
RenderObjectWidget: It provides the configuration for the RenderObjectElements, which wrap RenderObjects, that provide the actual rendering of the application.
InheritedWidget: It is a base class for widgets that efficiently propagates information down the tree. To obtain the near instance of a particular type of inherited widget from a build context, use BuildContext.dependOnInheritedWidgetOfExactType.
When referenced in this way, it causes the consumer to rebuild when the inherited widget itself changes state.
ParentDataWidget: It is a base class for a widget that hooks ParentData information to children of RenderObjectWidgets. It is used to provide a per-child configuration for RenderObjectWidgets with more than one child.
LeafRenderObjectWidget: It is a superclass for RenderObjectWidgets that configure RenderObject subclasses that have no children.
SingleChildRenderObjectWidget: It is a superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single child slot.
MultiChildRenderObjetWidget: It is a superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single list of children.
_NullWidget: Zero cost widget. Use it when you need a placeholder.
A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
1 import 'package:flutter/material.dart'; 2
1 void main() { 2 runApp(gfgApp()); //MaterialApp 3 } 4 5 MaterialApp gfgApp() { 6 return MaterialApp( 7 home: Scaffold( 8 appBar: AppBar( 9 title: const Text('My demo app'), 10 ), //AppBar 11 body: const Center( 12 child: Text( 13 'Hello Geeks', 14 style: TextStyle(fontSize: 24), 15 ), //Text 16 ), // center 17 ), //Scaffold 18 debugShowCheckedModeBanner: false, //Removing Debug Banner 19 ); 20 } 21 22
Layout a list of child widgets in the vertical direction.
1 import 'package:flutter/material.dart'; 2 3 4 //function to trigger build 5 void main() { 6 runApp(const MyApp()); 7 } 8 9 10 class MyApp extends StatelessWidget { 11 const MyApp({Key? key}) : super(key: key); 12 13 14 @override 15 Widget build(BuildContext context) { 16 return MaterialApp( 17 title: 'My Demo App', 18 theme: ThemeData( 19 primarySwatch: Colors.blue, 20 ), // ThemeData 21 home: const MyHomePage(), 22 debugShowCheckedModeBanner: false, 23 ); // MaterialApp 24 } 25 } 26 27 28 class MyHomePage extends StatefulWidget { 29 const MyHomePage({Key? key}) : super(key: key); 30 31 32 @override 33 // ignore: library_private_types_in_public_api 34 _MyHomePageState createState() => _MyHomePageState(); 35 } 36 37 38 class _MyHomePageState extends State
A convenience widget that combines common painting, positioning, and sizing widgets.
1 import 'package:flutter/material.dart'; 2 3 void main() => runApp(const MyApp()); 4 5 class MyApp extends StatelessWidget { 6 const MyApp({Key? key}) : super(key: key); 7 8 @override 9 Widget build(BuildContext context) { 10 return MaterialApp( 11 home: Scaffold( 12 appBar: AppBar( 13 title: const Text("Container example"), 14 ), 15 body: Container( 16 child:const Text("Hello! i am inside a container!", 17 style: TextStyle(fontSize: 20)), 18 ), 19 ), 20 ); 21 } 22 } 23 24
A Material Design elevated button. A filled button whose material elevates when pressed.
1 ElevatedButton( 2 child: Text('Elevated Button'), 3 style: ElevatedButton.styleFrom( 4 primary: Colors.blue, 5 ), 6 onPressed: () {}, 7 ),
The Flutter logo, in the widget form. This widget respects the IconTheme.
1 import 'package:flutter/material.dart'; 2 3 //Material design library 4 void main() { 5 runApp( 6 //widget tree starts here 7 MaterialApp( 8 home: Scaffold( 9 appBar: AppBar( 10 leading: Container( 11 color: Colors.white, 12 padding: EdgeInsets.all(3), 13 /** FlutterLogo Widget **/ 14 child: FlutterLogo( 15 size: 10, 16 ), //FlutterLogo 17 ), //Container 18 title: Text('Hello Dev'), 19 backgroundColor: Colors.blueAccent[400], 20 centerTitle: true, 21 ), //AppBar 22 body: Center( 23 child: Container( 24 /** FlutterLogo Widget **/ 25 child: FlutterLogo( 26 size: 300, 27 textColor: Colors.blue, 28 style: FlutterLogoStyle.stacked, 29 ), //FlutterLogo 30 ), //Container 31 ), //Center 32 ), //Scaffold 33 ), //MaterialApp 34 ); 35 } 36 37
A Material Design icon.
1 import 'package:flutter/material.dart'; 2 3 void main() => runApp(const MyApp()); 4 5 /// main application widget 6 class MyApp extends StatelessWidget { 7 const MyApp({Key? key}) : super(key: key); 8 9 static const String _title = 'Flutter Application'; 10 11 @override 12 Widget build(BuildContext context) { 13 return MaterialApp( 14 title: _title, 15 home: Scaffold( 16 appBar: AppBar(title: const Text(_title)), 17 body: const MyStatelessWidget(), 18 ), 19 ); 20 } 21 } 22 23 /// stateless widget that the main application instantiates 24 class MyStatelessWidget extends StatelessWidget { 25 const MyStatelessWidget({Key? key}) : super(key: key); 26 27 @override 28 Widget build(BuildContext context) { 29 return Column( 30 crossAxisAlignment: CrossAxisAlignment.stretch, 31 children: const
A widget that displays an image.
1 import 'package:flutter/material.dart'; 2 3 void main() => runApp(MyApp()); 4 5 class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: Scaffold( 10 appBar: AppBar( 11 title: Text('Flutter Image Demo'), 12 ), 13 body: Center( 14 child: Column( 15 children:
A widget that draws a box that represents where other widgets will one day be added.
1 SizedBox(height: 10), 2 Container( 3 height: 100, 4 child: Placeholder(color: RED), 5 ), 6
Layout a list of child widgets in the horizontal direction.
1 import 'package:flutter/material.dart'; 2 3 4 //function to trigger build 5 void main() { 6 runApp(const MyApp()); 7 } 8 9 10 class MyApp extends StatelessWidget { 11 const MyApp({Key? key}) : super(key: key); 12 13 14 @override 15 Widget build(BuildContext context) { 16 return MaterialApp( 17 title: 'My Demo App', 18 theme: ThemeData( 19 primarySwatch: Colors.blue, 20 ), // ThemeData 21 home: const MyHomePage(), 22 debugShowCheckedModeBanner: false, 23 ); // MaterialApp 24 } 25 } 26 27 28 class MyHomePage extends StatefulWidget { 29 const MyHomePage({Key? key}) : super(key: key); 30 31 32 @override 33 // ignore: library_private_types_in_public_api 34 _MyHomePageState createState() => _MyHomePageState(); 35 } 36 37 38 class _MyHomePageState extends State
A run of text with a single style.
Example:
1 import 'package:flutter/cupertino.dart'; 2 import 'package:flutter/gestures.dart'; 3 import 'package:flutter/material.dart'; 4 5 void main() { 6 runApp(MyApp()); 7 } 8 9 class MyApp extends StatelessWidget { 10 @override 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 home: Scaffold( 14 appBar: AppBar( 15 title: Text("Flutter Text Widget"), 16 ), 17 body: Text("This is text"), 18 ), 19 ); 20 } 21 } 22 23
Output:
Also, read our article on medium to know about the popular animation widgets for creating an intuitive UI.
And here you have it; everything about the Flutter widgets!! Hope you find it useful to get a quick view of Flutter's basic widgets, categories, and types.
Well, if you are looking for a way to make your app development faster without affecting code quality try DhiWise- A ProCode app development platform for web and mobile application development.
Its Flutter app builder provides you with the state of the art features, such as Figma to flutter, state management, flexibility to customization, team collaboration, complete code ownership, and more.
So, don’t waste your precious time on repetitive tasks in app development, sign up now to generate your production code in just a few steps.