You are currently viewing Getting Started with Flutter

Getting Started with Flutter

Flutter is an open-source UI software development kit created by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It uses the Dart programming language and provides a rich set of pre-built widgets to create beautiful and responsive apps. In this tutorial, we’ll guide you through the process of setting up Flutter, creating a new Flutter project, and building a simple app.


  • Flutter SDK installed on your machine. You can follow the official Flutter installation guide for your operating system.
  • Android Studio or VS Code with Flutter and Dart plugins installed (optional but recommended).

Step 1: Create a New Flutter Project

Open your terminal and run the following command to create a new Flutter project:

flutter create my_first_flutter_app

This will create a new directory called my_first_flutter_app with a default Flutter project structure.

Step 2: Run Your Flutter App

Navigate to your project directory and run the app on an emulator or connected device:

cd my_first_flutter_app
flutter run

This command will start the app on your emulator or connected device. You should see a default Flutter app with a counter example.

Step 3: Customize Your Flutter App

3.1 Update lib/main.dart

Open lib/main.dart in your preferred code editor. This is where the main code for your Flutter app resides.

Replace the default code with the following example code:

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: MyHomePage(),

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      body: Center(
        child: Column(
          children: <Widget>[
              'You have pushed the button this many times:',
              style: Theme.of(context).textTheme.headline4,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),

3.2 Explanation

  • This code creates a simple Flutter app with a MyHomePage widget that contains a counter.
  • The MyApp widget sets up the basic MaterialApp structure for the app.
  • MyHomePage is a StatefulWidget that maintains the state of the counter.
  • _incrementCounter function is called when the FloatingActionButton is pressed, incrementing the counter.

Step 4: Run and Test Your App

Save the changes and run your app again:

flutter run

You should see the updated app with an app bar, a centered counter, and a floating action button.

Step 5: Explore More Widgets and Features

Flutter provides a wide range of widgets for building UIs. Here are a few examples you can try adding to your app:

  • Text: Display text with different styles.
  • Image: Show images from assets or URLs.
  • ListView: Display a scrollable list of widgets.
  • GestureDetector: Add touch gestures to your UI.
  • Navigation: Navigate between screens using Navigator.

Feel free to explore the Flutter documentation and widget catalog for more widgets and features.

Step 6: Additional Resources

Here are some additional resources to continue learning Flutter:


This tutorial covers the basics of setting up a Flutter project, creating a simple app, and running it on an emulator or device. Continue exploring Flutter’s rich set of widgets and features to build amazing cross-platform apps.

Flutter Documentation

Leave a Reply