The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore the fundamental building blocks of any Flutter application: widgets. Widgets are the core elements that make up the user interface in Flutter. Understanding how to use basic widgets is essential for creating any Flutter app.

Key Concepts

Widgets Overview
- Widgets are the basic building blocks of a Flutter app's user interface.
- Everything in Flutter is a widget, including layout models, text, images, and even the app itself.
Types of Widgets
- Stateless Widgets: Immutable widgets that do not change once they are built.
- Stateful Widgets: Mutable widgets that can change their state during the app's lifecycle.
Commonly Used Basic Widgets
- Text
- Container
- Row
- Column
- Image
- Icon
- Button

Practical Examples

Text Widget

The Text widget is used to display a string of text with a single style.

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('Basic Widgets Example'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Container Widget

The Container widget is a versatile widget that can contain other widgets and apply padding, margins, borders, and background color.

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('Container Widget Example'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(16.0),
            margin: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.amber,
              borderRadius: BorderRadius.circular(8.0),
            ),
            child: Text(
              'This is a container',
              style: TextStyle(fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

Row and Column Widgets

The Row and Column widgets are used to arrange other widgets horizontally and vertically, respectively.

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('Row and Column Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.star, color: Colors.red),
                Icon(Icons.star, color: Colors.green),
                Icon(Icons.star, color: Colors.blue),
              ],
            ),
            Text('Stars in a Row'),
          ],
        ),
      ),
    );
  }
}