What is widgets in Flutter?

Flutter is Google’s UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets – The building block of flutter applications. Widgets describe what their view should look like given their current configuration and state. It includes a text widget, row widget, column widget, container widget, and many more. 

Widgets: Each element on a screen of the Flutter app is a widget. The view of the screen completely depends upon the choice and sequence of the widgets used to build the app. And the structure of the code of an app is a tree of widgets. 

Category of Widgets: There are mainly 14 categories in which the flutter widgets are divided. They are mainly segregated on the basis of the functionality they provide in a flutter application.

  1. Accessibility: These are the set of widgets that make a flutter app more easily accessible.
  2. Animation and Motion: These widgets add animation to other widgets.
  3. Assets, Images, and Icons: These widgets take charge of assets such as display images and show icons.
  4. Async: These provide async functionality in the flutter application.
  5. Basics: These are the bundle of widgets which are absolutely necessary for the development of any flutter application.
  6. Cupertino: These are the ios designed widgets.
  7. Input: This set of widgets provide input functionality in a flutter application.
  8. Interaction Models: These widgets are here to manage touch events and route users to different views in the application.
  9.  Layout: This bundle of widgets helps in placing the other widgets on the screen as needed.
  10. Material Components: This is a set of widgets that mainly follow material design by Google.
  11. Painting and effects: This is the set of widgets which apply visual changes to their child widgets without changing their layout or shape.
  12. Scrolling: This provides sacrollability of to a set of other widgets that are not scrollable by default.
  13. Styling: This deals with the theme, responsiveness, and sizing of the app.
  14. Text: This display text.

Types of Widgets: There are broadly two types of widgets in the flutter: 

  1. Stateless Widget
  2. Stateful Widget

Example: The Layout Tree of basic app screen: 



Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
 
void main() => runApp(GeeksforGeeks()); 
 
class GeeksforGeeks extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( home: Scaffold( backgroundColor: Colors.lightGreen,
                                       appBar: AppBar( backgroundColor: Colors.green,
                                       title: Text("GeeksforGeeks"), ),
                                        
   body: Container( child: Center( child: Text("Hello Geeks!!"), ), ), ), ); } } 

chevron_right


 
 

Description of the Widgets Used: 

  • Scaffold – Implements the basic material design visual layout structure.
  • AppBar – To create a bar at the top of the screen.
  • Text  To write anything on the screen.
  • Container – To contain any widget.
  • Center – To provide center alignment to other widgets.

Output: 
 

 

Widgets in Flutter Example

 

 

My Personal Notes arrow_drop_up

Exploring the Coding World

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

4


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.