Flutter Basics: Everything is a Widget

In Flutter, everything is a widget. Whether it’s a button, a piece of text, or an entire screen layout, it’s built using widgets.

Two Main Types of Widgets:

1. Stateless Widgets: These are widgets that do not change over time. They are ideal for static content.

2. Stateful Widgets: These are widgets that can change dynamically, based on user interaction or other events.

For now, let’s start with the simplest widget: StatelessWidget.

Building Your First Flutter Widget: The Text Widget

To display something simple, like text, you can use the Text() widget. Let’s see how it works inside a StatelessWidget.

Remove the content in main.dart and paste the below code.

Here’s a basic 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('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Code Breakdown:

• MaterialApp: Wraps your app with Material Design properties.

• Scaffold: Provides a basic structure like AppBar, body, etc.

• Text: A simple widget to display text.

You dont need to worry about these code for now. We will cover deeply in the further series.

Main Widgets in Flutter

Flutter provides a vast list of widgets to build your app's UI. Here’s a list of some of the most commonly used widgets, categorized by their purpose:

Basic Widgets

• Container: A versatile widget for styling and positioning.

• Text: Displays a string of text.

• Image: Displays images in various formats.

• Icon: Displays an icon from the Material Icons set.

• Button Widgets:

  • ElevatedButton: A raised button.

  • TextButton: A flat button for text actions.

  • OutlinedButton: A button with an outline border.

Layout Widgets

• Row: Arranges children horizontally.

• Column: Arranges children vertically.

• Stack: Overlays widgets on top of each other.

• ListView: A scrollable list of widgets.

• GridView: A scrollable grid of widgets.

Input Widgets

• TextField: Accepts text input from the user.

• Checkbox: Allows the user to select a boolean option.

• Switch: A toggle switch for a boolean value.

• Slider: Allows users to select a value from a range.

Styling and Positioning Widgets

• Padding: Adds padding around a widget.

• Align: Aligns a child widget within its parent.

• Center: Centers a child widget.

• Expanded: Makes a child widget fill available space.

• SizedBox: Adds fixed spacing or sizing between widgets.

Advanced Widgets

• FutureBuilder: Builds a widget based on the state of a Future.

• StreamBuilder: Builds a widget based on the state of a Stream.

• GestureDetector: Detects gestures like taps and swipes.

In the next part of the tutorial, as mentioned, you'll dive deeper into Row and Column, which are essential for creating complex layouts in Flutter!