A Comprehensive Guide to Flutter Widget Types

1. Types of Widgets in Flutter

Flutter widgets are categorized into two major types:

a) Stateless Widgets

A StatelessWidget is immutable, meaning its properties cannot change once defined. It does not maintain any internal state.

Example:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String text;

  MyStatelessWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text, style: TextStyle(fontSize: 20));
  }
}

b) Stateful Widgets

A StatefulWidget maintains state that can change during the widget’s lifecycle. It consists of two classes:

• A StatefulWidget class
• A State class

Example:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter: \$counter', style: TextStyle(fontSize: 20)),
        ElevatedButton(onPressed: incrementCounter, child: Text('Increment'))
      ],
    );
  }
}

2. Flutter Widget Categories

Flutter widgets are broadly categorized into three types:

a) Structural Widgets

These widgets define the layout structure of an app.

• Container
• Column and Row
• Stack
• Expanded

b) Interactive Widgets

These widgets handle user interactions.

• GestureDetector
• InkWell
• TextField
• ElevatedButton

c) Styling Widgets

These widgets apply visual styles to other widgets.

• Padding
• Align
• DecoratedBox
• Theme

3. Connecting Widgets Together

Let's create an example that integrates all these widget types.

Full Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter Widget Types")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MyStatelessWidget(text: "Current Count: \$counter"),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: incrementCounter,
              child: Text("Increment"),
            ),
          ],
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  final String text;
  MyStatelessWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text, style: TextStyle(fontSize: 20));
  }
}

Conclusion

Flutter widgets are the building blocks of any Flutter application. By understanding StatelessWidgets, StatefulWidgets, and different categories like structural, interactive, and styling widgets, developers can efficiently build scalable and responsive apps. The provided example illustrates how these widgets connect and work together to form a complete Flutter application