How to start coding Flutter in 60 minutes

How to start coding Flutter in 60 minutes

Table of Contents

Google’s Flutter came out in our lives with the motto “Design beautiful applications” quickly for multiple environments at once. 

According to Stackoverflow insights for 2021, Flutter is the second loved framework&tool.

Flutter is the most used cross-platform mobile framework according to Statista, leaving React-Native far behind!

https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
Source: Statista

What is Flutter?

Flutter is a free and open-source UI toolkit for developing cross-platform applications which will run on mobile, web, desktop, and embedded devices from a single codebase. 

In this tutorial, I will go through implementing a simple mobile application with Flutter with the assumption below; 

  • If you want to view the application in mobile, you should have a simulator installed in your local environment, and I’m using Xcode, which comes with many simulators by default.

For web development, you don’t need any additional setup.

How to Install?

Download the latest stable release of the Flutter SDK from the official SDK releases page.

				
					$ cd ~/devtools
$ unzip ~/Downloads/flutter_macos_2.5.3-stable.zip
				
			

Add the Flutter tool to your path:

				
					$ export PATH="$PATH:`pwd`/flutter/bin"
				
			

Now you should be able to run the Flutter commands! Verify Flutter installation with command;

				
					$ which flutter
/<path-to-flutter>/flutter/bin/flutter
				
			

Initialize a New Application

Create an application named my_flutter_app in the command line.

				
					$ flutter create my_flutter_app
All done!
In order to run your application, type:

  $ cd my_flutter_app
  $ flutter run

Your application code is in my_flutter_app/lib/main.dart.
				
			

A starter Flutter app is initialized with a default home page. Navigating the app root folder and running the command ‘flutter run,’ will start the application with a dynamic port in the Google Chrome browser.

Simple Flutter Example

Let’s get your hands a bit dirty with a simple JSON file view example! 

Copy-paste the content to the file my_flutter_app/assets/sample.json

				
					{
  "items": [
    {
      "id": "1",
      "city": "Istanbul",
      "population": "15.46 million"
    },
    {
      "id": "2",
      "city": "Berlin",
      "population": "3.64 million"
    },
    {
      "id": "3",
      "city": "Paris",
      "population": "2.16 million"
    }
  ]
}
				
			

Update the pubspec.yaml file to include the sample.json file

				
					flutter:
     assets:
        - assets/sample.json
				
			

update main.dart file to list the content of the sample.json

				
					import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  List _items = [];
 
  // Fetch content from the json file
  Future<void> readJson() async {
    final String response = await rootBundle.loadString('assets/sample.json');
    final data = await json.decode(response);
    setState(() {
      _items = data["items"];
    });
  }
 
  @override
  void initState() {
    this.readJson();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'https://exceptionly.com',
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
            // Display the data loaded from sample.json
            _items.isNotEmpty
                ? Expanded(
                    child: ListView.builder(
                      itemCount: _items.length,
                      itemBuilder: (context, index) {
                        return Card(
                          margin: const EdgeInsets.all(10),
                          child: ListTile(
                            leading: Text(_items[index]["id"]),
                            title: Text(_items[index]["city"]),
                            subtitle: Text(_items[index]["population"]),
                          ),
                        );
                      },
                    ),
                  )
                : Container()
          ],),),);} }
				
			

Start a simulator for mobile view and then run the application. 

				
					$ open -a simulator
$ flutter run
				
			

Observations

  • Main.dart file contains a class named HomePage, and overrides the state with a custom state class.
  • A variable is initialized in a state to keep the sample data from json file 
  • The readJson function will be used to gather the data from sample.json and set the values to the items variable.
  • We are overriding the initState function to call readJson function on init.
  • The build method will create a widget with a list of results we just assigned on return.

Flutter’s official website has excellent documentation and many examples. The best way to learn a tool or a language is practice. 

Check out my other “start coding in 60 minutes” post series to challange other tools!

2 Responses

  1. Pingback: Exceptionly

Leave a Reply

Your email address will not be published. Required fields are marked *

en_USEnglish