DEV Community: Jayesh Prajapati

Getting Started with Mobile App Development Using Flutter — Step by Step Guide

Jayesh Prajapati — Thu, 21 Aug 2025 06:59:13 +0000

Flutter is an open-source UI toolkit by Google that allows you to build Android, iOS, and web apps using a single codebase. In this guide, we’ll walk you through installing and setting up Flutter and creating your first simple app.

1. What is Flutter?

Flutter uses the Dart programming language and is a widgets-based framework, which means the UI is fully customizable.

Benefits:

Single codebase → Android + iOS + Web

Fast development → Hot Reload

Beautiful UI → Material & Cupertino widgets

2. System Requirements

Windows:

Windows 10/11

Disk Space: 1.64 GB (Flutter SDK)

RAM: 8 GB recommended

Tools: PowerShell 5.0+, Git

Mac:

macOS (64-bit)

Xcode (for iOS builds)

Linux:

Ubuntu 20+

Git, curl, unzip installed

3. Installing Flutter SDK

Windows Example:

Download the latest Flutter SDK from the official website

Extract the zip folder (e.g., C:\src\flutter).

Add C:\src\flutter\bin to your system PATH.

Open CMD and run:

flutter doctor

This checks dependencies and highlights any missing setup steps.

Mac/Linux: Similar steps, just different paths.

4. Setting Up an IDE

Option 1: VS Code (recommended)

Install VS Code

Add Flutter & Dart extensions

Option 2: Android Studio

Install Android Studio

Add Flutter plugin

Set up an Android Emulator

5. Creating Your First Flutter App

Open terminal or CMD.

Run:
flutter create hello_flutter

Navigate to the project:
cd hello_flutter

Run the app:

flutter run

Example Code — main.dart

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

6. Hot Reload & Hot Restart

Hot Reload: Save code → changes appear instantly

Hot Restart: Restart the app → resets the state

Tip: Hot Reload is your best friend for fast experimentation.

Next Steps

Explore Flutter widgets (Text, Column, Row, Stack)

Learn State Management (Provider / BLoC)

Build small apps (Counter, To-Do, Calculator)

If you found this guide helpful, consider supporting me on Buy Me a Coffee! ☕

Flutter Widgets (20 Common Widgets)

Jayesh Prajapati — Sat, 16 Aug 2025 05:15:29 +0000

1. Container Widget

import 'package:flutter/material.dart';

class ContainerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      margin: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text('Hello Container!', style: TextStyle(color: Colors.white)),
    );
  }
}

2. Row And Column Widget

 import 'package:flutter/material.dart';

class RowColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Line 1'),
        Text('Line 2'),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        ),
      ],
    );
  }
}

3. ListView Widget

 import 'package:flutter/material.dart';

class ListViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
        ListTile(title: Text('Item 3')),
      ],
    );
  }
}

4. Stack Widget

 import 'package:flutter/material.dart';

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.network('https://placekitten.com/200/300'),
        Positioned(
          bottom: 10,
          right: 10,
          child: Text('Kitten!', style: TextStyle(color: Colors.white)),
        ),
      ],
    );
  }
}

5. GestureDetector Widget

import 'package:flutter/material.dart';

class GestureDetectorExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('Tapped!');
      },
      child: Container(
        padding: EdgeInsets.all(20),
        color: Colors.orange,
        child: Text('Tap Me'),
      ),
    );
  }
}

6.Expanded Widget

import 'package:flutter/material.dart';

class ExpandedFlexibleExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(child: Container(color: Colors.red, height: 50)),
        Expanded(child: Container(color: Colors.green, height: 50)),
      ],
    );
  }
}

7. FutureBuilder Widget

import 'package:flutter/material.dart';

class FutureBuilderExample extends StatelessWidget {
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2));
    return 'Hello from the future!';
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return Text('Data: ${snapshot.data}');
        }
      },
    );
  }
}

8. Padding Widget

import 'package:flutter/material.dart';

class PaddingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Text('Padded Text'),
    );
  }
}

9. Align Widget

import 'package:flutter/material.dart';

class AlignExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topRight,
      child: Text('Top Right'),
    );
  }
}

10.Center Widget

import 'package:flutter/material.dart';

class CenterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Centered Text'),
    );
  }
}

11. ElevatedButton Widget

import 'package:flutter/material.dart';

class ElevatedButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        print('Clicked!');
      },
      child: Text('Click Me'),
    );
  }
}

12.TextButton Widget

import 'package:flutter/material.dart';

class TextButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {},
      child: Text('Text Button'),
    );
  }
}

13. IconButton Widget

import 'package:flutter/material.dart';

class IconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.volume_up),
      onPressed: () {
        print('Volume button pressed');
      },
    );
  }
}

14. TextField Widget

import 'package:flutter/material.dart';

class TextFieldExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(labelText: 'Enter something'),
    );
  }
}

15.Switch Widget

import 'package:flutter/material.dart';

class SwitchExample extends StatefulWidget {
  @override
  _SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool isOn = false;

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: isOn,
      onChanged: (value) {
        setState(() {
          isOn = value;
        });
      },
    );
  }
}

16.CheckBox Widget

import 'package:flutter/material.dart';

class CheckboxExample extends StatefulWidget {
  @override
  _CheckboxExampleState createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool checked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: checked,
      onChanged: (value) {
        setState(() {
          checked = value!;
        });
      },
    );
  }
}

17. AppBar Widget

import 'package:flutter/material.dart';

class AppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My AppBar')),
      body: Center(child: Text('Body Content')),
    );
  }
}

18. BottomNavigationBar Widget

import 'package:flutter/material.dart';

class BottomNavExample extends StatefulWidget {
  @override
  _BottomNavExampleState createState() => _BottomNavExampleState();
}
class _BottomNavExampleState extends State<BottomNavExample> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Tab $currentIndex')),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}

19. Card Widget

import 'package:flutter/material.dart';

class CardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('I am inside a card!'),
      ),
    );
  }
}

20. CercleAvatar Widget

import 'package:flutter/material.dart';

class CircleAvatarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: 40,
      backgroundImage: NetworkImage('https://i.pravatar.cc/300'),
    );
  }
}

If you enjoyed this, buy me a coffee!

☕️ Buy Me a Coffee