DEV Community

Cover image for Build Your First Flutter App in 10 Minutes – The Fun Way!
The Witcher
The Witcher

Posted on

Build Your First Flutter App in 10 Minutes – The Fun Way!

#webdev #flutter #programming #beginners

Hey devs! 👋

If you’ve ever wanted to dive into Flutter and build cross-platform apps with a single codebase, today’s your day. In this post, we’ll create your very first Flutter app — a simple yet cool Counter App.

No fluff. Just straight-up fun Flutter!

🛠️ Prerequisites

Before we start, make sure you have:

  • Flutter SDK installed
  • Android Studio or VS Code
  • An Android/iOS emulator or a real device
  • Dart plugin installed (if using VS Code)

Test Flutter setup by running:

flutter doctor
Enter fullscreen mode Exit fullscreen mode

✅ Fix any issues it points out before moving forward.

🌱 Step 1: Create Your First App

Open a terminal and run:

flutter create counter_app
cd counter_app
Enter fullscreen mode Exit fullscreen mode

This creates a new Flutter project with all the basic files.

🖼️ Step 2: Understand the Starter Template

Open lib/main.dart. You’ll see a lot of code already there.

Don’t worry — Flutter is being nice and giving you a working counter app out of the box. Let’s understand and tweak it!

🎯 Step 3: Run the App!

Make sure a simulator or real device is connected, then run:

flutter run
Enter fullscreen mode Exit fullscreen mode

Boom 💥 — you should see your very first Flutter app running!

Try tapping the + button and watch the number go up. ✨

🧠 Step 4: Let’s Break Down the Code

Inside lib/main.dart, find the MyHomePage widget.

Here’s the core part of it simplified:

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++; // Updates the UI
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Counter 🚀')),
      body: Center(
        child: Text('Counter: $_counter', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode
  • setState() = tells Flutter to refresh the UI
  • Scaffold = provides the basic app structure
  • FloatingActionButton = the shiny button that increases the counter

🎨 Step 5: Customize It a Bit

Let’s make it cooler.

Change the text color and add a smiley emoji:

child: Text(
  'Counter: $_counter 😊',
  style: TextStyle(fontSize: 24, color: Colors.purple),
),
Enter fullscreen mode Exit fullscreen mode

Now restart the app and admire your masterpiece. 🎉

🧩 Bonus: Hot Reload is 🔥

Make changes in your code, save the file, and watch your app update instantly — no rebuild needed. Flutter’s hot reload is magic!

🚀 What Next?

You just built your first Flutter app! From here, you can:

  • Add more buttons
  • Explore layouts like Column and Row
  • Connect to an API
  • Navigate between screens

Flutter is vast — but you’ve already taken the first awesome step.

❤️ Wrap Up

Flutter makes mobile app development fun, fast, and beautiful. Hope you enjoyed building your first app. Now go ahead and build something amazing — and post it on DEV too 😉

Got questions or wanna share your app? Drop a comment below!

Happy Fluttering! 💙

Top comments (0)