Flutter Widgets: Building Dynamic & Stunning User Interfaces

❮ Flutter Architecture
Next ❯

Flutter widgets are the building blocks of a Flutter application’s user interface. They are the visual elements that make up the UI, and Flutter provides a rich set of customizable widgets that can be used to create a wide variety of user interfaces. Widgets in Flutter are not just UI components; they can also represent layout constraints, animation controllers, and more. Here’s an overview of Flutter widgets:

1. StatelessWidget:

  • A StatelessWidget is a widget that does not depend on any mutable state. It takes in some input properties (also called parameters) and returns a widget tree based on those properties.
   class MyWidget extends StatelessWidget {
     final String text;

     MyWidget({required this.text});

     @override
     Widget build(BuildContext context) {
       return Text(text);
     }
   }

2. StatefulWidget:

  • A StatefulWidget is a widget that can change over time. It has associated mutable state that can be modified, triggering a rebuild of the widget tree.
   class CounterWidget extends StatefulWidget {
     @override
     _CounterWidgetState createState() => _CounterWidgetState();
   }

   class _CounterWidgetState extends State<CounterWidget> {
     int counter = 0;

     @override
     Widget build(BuildContext context) {
       return Column(
         children: [
           Text('Counter: $counter'),
           ElevatedButton(
             onPressed: () {
               setState(() {
                 counter++;
               });
             },
             child: Text('Increment'),
           ),
         ],
       );
     }
   }

3. Container:

  • The Container widget is a box model that can contain other widgets. It is often used for layout purposes and styling.
   Container(
     width: 100,
     height: 100,
     color: Colors.blue,
     child: Center(
       child: Text('Hello, Flutter!'),
     ),
   )

4. Column and Row:

  • Column and Row are layout widgets that arrange their children vertically and horizontally, respectively.
   Column(
     children: [
       Text('First Item'),
       Text('Second Item'),
       Text('Third Item'),
     ],
   )

5. ListView:

  • The ListView widget is used for creating scrollable lists.
   ListView(
     children: [
       ListTile(
         title: Text('Item 1'),
       ),
       ListTile(
         title: Text('Item 2'),
       ),
       // ...
     ],
   )

6. Stack:

  • The Stack widget allows you to overlay widgets on top of each other.
   Stack(
     children: [
       Image.network('url-to-image'),
       Positioned(
         bottom: 16,
         left: 16,
         child: Text('Overlay Text'),
       ),
     ],
   )

7. AppBar:

  • The AppBar widget is typically used as the top app bar in a Flutter application.
   AppBar(
     title: Text('My Flutter App'),
     actions: [
       IconButton(
         icon: Icon(Icons.search),
         onPressed: () {
           // Handle search action
         },
       ),
     ],
   )

8. Flutter MaterialApp:

  • The MaterialApp widget is often the root widget of a Flutter application, providing basic material design visual elements.
   MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text('My App'),
       ),
       body: Center(
         child: Text('Hello, Flutter!'),
       ),
     ),
   )

9. GestureDetectors:

  • GestureDetector widgets are used to handle user gestures like taps, swipes, and long presses.
   GestureDetector(
     onTap: () {
       // Handle tap
     },
     child: Container(
       width: 100,
       height: 100,
       color: Colors.blue,
       child: Center(
         child: Text('Tap me'),
       ),
     ),
   )

10. Flutter Icons:

  • Flutter provides a set of built-in icons through the Icons class.
   Icon(Icons.star, color: Colors.yellow, size: 48)

These are just a few examples of the many widgets available in Flutter. The framework’s flexibility allows developers to compose complex UIs by combining and nesting these widgets creatively. The Flutter widget system is an essential aspect of the framework’s success, enabling developers to create beautiful and responsive user interfaces for various platforms.

For more you can visit official Flutter documentation from https://flutter.dev/

❮ Flutter Architecture
Next ❯

Share with