Posted on Feb 14

Building a Simple Flutter App: A Beginner’s Guide

Introduction

Flutter is a powerful UI toolkit by Google that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. In this guide, we’ll walk through creating a simple Flutter app to help beginners get started.

Step 1: Setting Up Your Flutter Environment

Before we start coding, ensure you have Flutter installed on your system.

Installation Steps:

Download and install the Flutter SDK (Official Guide).
Install an editor like VS Code or Android Studio.
Set up an emulator or connect a physical device.
Run the following command to check if everything is set up correctly:

flutter doctor

Step 2: Creating Your First Flutter Project

Once Flutter is set up, create a new project using:

flutter create my_first_app
cd my_first_app
flutter run

This command generates a basic Flutter project with all necessary files.

Step 3: Understanding the Folder Structure

lib/: Contains the main Dart code.

pubspec.yaml: Manages dependencies and assets.

android/ & ios/: Platform-specific configurations.

Step 4: Building a Simple UI

Let’s modify the lib/main.dart file to create a basic counter app.

Code Example:

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: CounterApp(), ); } } 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('Flutter Counter App')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('You have pressed the button this many times:'), Text('$_counter', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); } }

Step 5: Running the App

Run the app using: