Flutter Widgets Explained for Beginners

Flutter is a powerful UI toolkit from Google that allows developers to build beautiful apps with a single codebase. For beginners, understanding widgets is the first and most essential step in mastering Flutter. Widgets are the building blocks of every Flutter application from layout and structure to text, images, and user interactions.

There are two main types of widgets: StatelessWidget and StatefulWidget.

StatelessWidget Example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateless Widget')),
        body: Center(child: Text('Hello Flutter!')),
      ),
    );
  }
}

StatefulWidget Example:

import 'package:flutter/material.dart';

void main() => runApp(MyStatefulApp());

class MyStatefulApp extends StatefulWidget {
  @override
  _MyStatefulAppState createState() => _MyStatefulAppState();
}

class _MyStatefulAppState extends State<MyStatefulApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateful Widget')),
        body: Center(child: Text('Counter: $_counter')),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Understanding these widget types helps beginners build dynamic UIs. As you explore more, you’ll work with layout widgets like Row, Column, Container, and interactive widgets like TextField, Button, and ListView.

To learn more, check out Flutter official documentation.