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 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. 

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

Check out this Author's contributed articles.

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.


Article Tags :

2


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