Basics of Widgets in Flutter 🚀

Flutter is a UI framework developed by Google to build mobile, web, and desktop applications with a single codebase. One of the core concepts in Flutter is widgets. In this article, we will discuss the basics of widgets in Flutter, their types, and examples of their usage.

📌 What is a Widget?

A widget is the basic building block of Flutter applications. Everything in Flutter is a widget, from text, buttons, images, to layouts.

There are two main types of widgets in Flutter:

StatelessWidget – A widget that does not change during runtime.
StatefulWidget – A widget that can change based on user interaction or data updates.

StatelessWidget

StatelessWidget is used for UI elements that do not require state changes. Here is a simple example of using StatelessWidget:

import 'package:flutter/material.dart';

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!"),
        ),
      ),
    );
  }
}

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

StatefulWidget

StatefulWidget is used when the UI needs to change based on user interaction or data updates. Here’s an example of a button that updates a counter when clicked:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Stateful Widget")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Button has been pressed:"),
            Text(
              '$_counter times',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

🎯 Common Widgets in Flutter

Here are some frequently used widgets in Flutter:

1️⃣ Text

Used to display text.

Text(
  "Hello, Flutter!", 
  style: TextStyle(
    fontSize: 20, 
    fontWeight: FontWeight.bold
  )
)

2️⃣ Container

Used to wrap and style other widgets.

Container(
  padding: EdgeInsets.all(16.0),
  color: Colors.blue,
  child: Text("This is a Container"),
)

3️⃣ Column & Row

Used to arrange widgets vertically (Column) or horizontally (Row).

Column(
  children: [
    Text("Row 1"),
    Text("Row 2"),
  ],
)

4️⃣ ElevatedButton

A button that can be clicked.

ElevatedButton(
  onPressed: () {},
  child: Text("Click Me"),
)

🔥 Conclusion

Widgets are the fundamental building blocks of Flutter applications. By understanding the differences between StatelessWidget and StatefulWidget, and familiarizing yourself with common widgets, you can start building Flutter applications more efficiently.