Flutter Workshop: Apps Made Simple

Sections

1) installation.

To start using Flutter you need to download and install a few things. It’s very easy and won’t take long. If you are familiar with software just follow the Flutter documentation. If not, see below. Basically, we need 3 things..

The IDE

An IDE is simply a code editor, e.g. the program that you write your code in.

The emulator

An emulator enables a device to imitate the functions of another device.

The Flutter SDK

A SDK is simply a collection of development tools contained in one package.

Follow along to one of the videos below. First one is for PC/Windows, second one is for mac/IOS. First here is the links you need in no particular order.

Windows installation video

Play Video

Mac installation video

Play Video

If that didn’t help you for some reason, try this, this, this, this or this – and if nothing works, please feel free to ask us 

2) Dartpad.

Let's start in Dartpad

+

					

class Person {
    String name = 'Sumith';
    int age = 30;
}

double addNumbers(double num1, double num2) { return num1 + num2; }

void main() {

    for (int i = 0; i == 6; i++) { 
        print('Hello ${i + 1}');
    }

 var p1 = Person();
 var p2 = Person();
 p2.name ='Andre';
  
 print(p1.name);
 print(p2.name);
  
double addnumberResult = addNumbers(2,3); print(addnumberResult);

}

3) Your first app.

Okay, let’s get started. Just follow along to the video below. It’s for Windows, but the steps and commands are the same for IOS. Ask if you need help. This only works if you followed the installation.

Play Video

4) Create a TODO app

Alright then! Below you will find step-by-step instructions on how to code a TODO app yourself. This requires that you’ve followed the prior steps. First, create a project like we did in step 3. 
(CMD -> cd your-folder -> flutter create todo_app)

4.1) Create the task model

					

class Task {
  String name, details;
  bool completed = false;

  static List _tasks = [
    Task('Learn Dart', 'testing desc'),
    Task('Drink coffee', null),
    Task('Join CBS Code', null),
    Task('Walk the dog', 'Flutter'),
  ];

  static List get tasks => _tasks;

  // Constructor with parameters for creating a Task object
  Task(this.name, this.details); 
}

4.2) Rewrite the main file

					

import 'package:flutter/material.dart';
import 'package:todo_app/pages/task_list_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: TaskListView(),
    );
  }
}

4.3) Add the task_list_view file

					

import 'package:flutter/material.dart';
import 'model/task.dart';

class TaskListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tasks'),
      ),
      body: ListView(
        children: [
          for (final task in Task.tasks)
            ListTile(
              leading: IconButton(
                icon: (task.completed)
                    ? Icon(Icons.check_circle)
                    : Icon(Icons.radio_button_unchecked),
                onPressed: null,
              ),
              title: Text(task.name),
              subtitle: (task.details != null) ? Text(task.details) : null,
            ),
        ],
      ),
    );
  }
}

4.4) Change the SDK version to 2.2.0

					

environment:
  sdk: ">=2.2.2 <3.0.0"

4.5) Follow the workshop

This page is not available on mobile.

You’ll need a laptop to follow the steps. Try from another device.

Close Menu