How to start coding Flutter in 60 minutes

How to start coding Flutter in 60 minutes

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 thoughts on "How to start coding Flutter in 60 minutes"

  1. Pingback: Exceptionly

Leave a Reply

Your email address will not be published.

#

“Exceptionly was such a fast and efficient process. Complete game changer for hiring remote.”

Liam Martin
Co-Founder at TimeDoctor

#

“Great service, outstanding speed, stunning quality.”

Andy Tryba
CEO at Gigster

Is Exceptionly an outsourcing business?

No. We encourage our clients to do direct hires. We provide payroll consultancy and services in a 100% transparent way if our clients are new to remote hiring.

Is Exceptionly a database of candidates?

Not really, data is only a small part of our business. While we own over 2 million publicly available software engineer data evaluated, our power lies in hands-on testing and engineer-to-engineer technical interviews.

Is Exceptionly expensive?

Exceptionly is more cost-efficient than any other serious competitor who owns a decent technical testing funnel. If you compare Exceptionly with HR agencies who only do resume screening before endorsement, yes, it is expensive.

Who is the founder of Exceptionly?

Sinan Ata is the founder of Exceptionly, who previously built two global technical talent acquisition enginess and tested over 2.5 million software engineers in his career.

Still have questions? Contact us.

Ready to meet top-notch engineers?

Let's get your talent pipelines up and running!

HIRE WITH EXCEPTIONLY

No hidden fees.