Getting Started with Flutter: Build Your First App

by Santhosh T

Flutter is a powerful UI toolkit that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. One of the core concepts in Flutter is Widgets. Everything in Flutter is a widget, from structural elements like Scaffold to buttons and text.

Understanding Widgets

Widgets describe what their view should look like given their current configuration and state.?

They are broadly classified into two types:

1. Stateless Widgets

A StatelessWidget is immutable, meaning its properties cannot change once it is built. These widgets are ideal for UI components that do not need to update dynamically.

Example of a Stateless Widget:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
    );
  }
}        

2. Stateful Widgets

A StatefulWidget can change dynamically during its lifecycle. It consists of two classes:

• A subclass of StatefulWidget
• A corresponding subclass of State that holds the widget’s mutable state.

Building Your First Stateful Widget

Stateful widgets allow UI updates when data changes. A StatefulWidget consists of two parts:

1. A subclass of StatefulWidget - This is the parent class that remains constant.
2. A subclass of State - This class holds mutable data that can change over time.

Example: Counter App

The following example demonstrates a simple counter app using a StatefulWidget:

import 'package:flutter/material.dart';
class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pressed the button this many times:', style: TextStyle(fontSize: 18)),
            Text('$_counter', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}        

This app maintains state using setState(), which triggers a UI rebuild when the counter value changes.

Layout Basics in Flutter

Flutter provides a flexible and powerful layout system for designing responsive UIs.

Common Layout Widgets

• Column: Arranges widgets vertically.
• Row: Arranges widgets horizontally.
• Container: A box that can have padding, margin, and decoration.
• Stack: Allows overlaying widgets on top of each other.
• Expanded: Adjusts child widgets within Row and Column.

Example: Using Column and Row

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Icon(Icons.star, size: 50, color: Colors.blue),
        Icon(Icons.favorite, size: 50, color: Colors.red),
        Icon(Icons.thumb_up, size: 50, color: Colors.green),
      ],
    ),
    SizedBox(height: 20),
    Text('Flutter Layout Basics', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold))
  ],
)        

Alignment and Spacing

• Use MainAxisAlignment to position elements within Row and Column.
• Use CrossAxisAlignment to control alignment along the secondary axis.

Navigation and Routing in Flutter

Navigation allows users to move between screens in a Flutter application. Flutter provides two primary ways to handle navigation:

1. Using Navigator.push() for Direct Navigation

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

2. Using Named Routes for Scalable Navigation

Define routes in the MaterialApp widget:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/second': (context) => SecondScreen(),
  },
);        

Navigate to a named route:

Navigator.pushNamed(context, '/second');        

Example: Basic Navigation

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}        

Conclusion

Flutter is a powerful framework for building cross-platform applications efficiently. Understanding widgets, state management, layouts, and navigation is crucial for mastering Flutter development. With these basics in hand, you are well on your way to developing engaging Flutter applications!