Your first flutter app

I know you must have googled a lot of information about Flutter knowing when it was introduced, who introduced it, its use cases, the engine it is running on, the one it was running on before this new one and many other facts but want to get your hands on something.

To start building flutter apps, you will need the knowledge of Dart Programming Language which is knowing its syntax and structure to look like every other OOP language (Javascript, Java, Python, C++ and others) so diving into it won't be a problem all and you don't need to be a 5 years dart developer-ready programmer to start building your apps with Flutter.

You just have to get started the same way you wrote your first HTML code

<p>Hello World</p>

without having a clue about what it's going to do but believing it's going to turn out good and display that on the browser. That's the kind of feeling you need right now :)

To start your journey you will decide what you need to decide whether you are going to be using Microsoft VS Code, Android Studio Code, or Xcode. When I started building using Flutter I started with VS Code and it was amazing at that time till I had to switch to Android Studio and Xcode

To install, you will need to follow the Flutter Docs (https://docs.flutter.dev/get-started/install) as everything you need is there and need not be rewritten or copied here. Download Android Studio (https://developer.android.com/studio) or Xcode (https://developer.apple.com/xcode/resources) or VsCode (https://code.visualstudio.com/download). If VsCode then you will have to download the Flutter extension (marketplace.visualstudio.com/items?itemName..) and (https://docs.flutter.dev/get-started/editor).

You need to set up your emulator using Android Studio (https://docs.expo.dev/workflow/android-studio-emulator) or XCode (https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device) depending on the way you decided to use and based on the machine you are using which is pretty easier. It was easy, right? Hmm! I heard a "Yessss".

So many refs to docs right? Yeah! That's the first rule of the game; reading docs

Your first app

By the time you are reading this, you should Flutter SDK in your machine already and you've decided on the Code Editor to use and you have your emulator running.

Let's start by creating a new project

flutter create myapp

On your Project structure, locate lib/main.dart, that's the file we are going to be editing. Paste this code and run the app.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

You will get the following result:

The first time you run on a physical device, it can take a while to load. Afterward, you can use hot reload for quick updates. Save also performs a hot reload if the app is running. When running an app directly from the console using flutter run, enter r to perform hot reload.

Observations

• This example creates a Material app. Material is a visual design language that is standard on mobile and the web. Flutter offers a rich set of Material widgets. It’s a good idea to have a uses-material-design: true entry in the flutter section of your pubspec.yaml file. This allows you to use more features of Material, such as its set of predefined Icons.

• The app extends StatelessWidget, which makes the app itself a widget. In Flutter, almost everything is a widget, including alignment, padding, and layout.

• The Scaffold widget, from the Material library, provides a default app bar, and a body property that holds the widget tree for the home screen. The widget subtree can be quite complex.

• A widget’s main job is to provide a build() method that describes how to display the widget in terms of other, lower-level widgets.

• The body for this example consists of a Center widget containing a Text child widget. The Center widget aligns its widget subtree to the center of the screen.

You can always find cool projects on my Twitter and LinkedIn Account