Flutter fundamentals

 

Flutter Fundamentals: A Beginner’s Guide

Introduction

Flutter is an open-source UI toolkit developed by Google. It allows developers to build beautiful and high-performance applications for Android, iOS, Web, and Desktop using a single codebase. Flutter has become very popular because it enables fast development and provides a rich set of customizable widgets.

---

What is Flutter?

Flutter is a framework used to create cross-platform applications. Instead of writing separate code for Android and iOS, developers can write one codebase and run it on multiple platforms.

Key Features of Flutter

• Single codebase for multiple platforms

• Fast development with Hot Reload

• Rich set of customizable widgets

• High performance with native-like experience

• Strong community support

---

Dart Programming Language

Flutter applications are written using the Dart programming language. Dart is an object-oriented language designed by Google that focuses on performance and productivity.

Example:

void main() {
  print("Hello Flutter");
}

Dart is easy to learn, especially for developers familiar with JavaScript, Java, or C#.

---

Widgets in Flutter

In Flutter, everything is a widget. Widgets are the building blocks of a Flutter application and define the structure and appearance of the UI.

There are two main types of widgets:

1. Stateless Widget

A Stateless widget represents a part of the UI that does not change once it is built.

Example:

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Hello Flutter");
  }
}

2. Stateful Widget

A Stateful widget represents a part of the UI that can change over time.

Example:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("$count"),
        ElevatedButton(
          onPressed: increment,
          child: Text("Increment"),
        )
      ],
    );
  }
}

---

Layout Widgets

Flutter provides several layout widgets to structure the UI.

Common layout widgets include:

• Container – used for styling and layout control

• Row – arranges widgets horizontally

• Column – arranges widgets vertically

• Stack – places widgets on top of each other

• Expanded – helps create responsive layouts

Example:

Column(
  children: [
    Text("Flutter"),
    Text("Fundamentals"),
  ],
)

---

Navigation in Flutter

Navigation allows users to move from one screen to another within an application. Flutter uses the Navigator class for managing routes.

Example:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

---

Hot Reload

One of Flutter’s most powerful features is Hot Reload. It allows developers to instantly see the changes they make in the code without restarting the entire application. This greatly speeds up the development process.

---

Conclusion

Flutter is a powerful framework for building fast, beautiful, and cross-platform applications. With its rich widget system, strong performance, and developer-friendly features like Hot Reload, Flutter is an excellent choice for modern app development.

---