Hello World

widget_component

This is an app that we are going to build as our first challenge. It might be challengeable but we are going to build one by one.


Let me explain App UI with words.

  1. Draw AppBar widget

  2. Draw Body Text with "Hello World". This text will be rendered with custom fonts "Ubuntu" downloaded from google fonts.

  3. Draw Bottom Navigation Bar


1. Create flutter project

First, Let's create flutter project. Open the terminal and type code like below.

$ cd development
$ flutter create hello_world
1
2
  • Line 1 code : Move into development folder which has flutter SDK

  • Line 2 code : Create flutter project which has name of "hello_world"

2. Open flutter file in vscode

Second, Let's move inside of "hello_world" folder and open vs code.

$ cd hello_world
$ code .
1
2
  • Line 1 code : After create flutter project, Let's move into folder of hello_world

  • Line 2 code : this is command that you can open VS code editor in the terminal

3. Write in the main.dart file

Third, Let's open main.dart file under lib folder. and then Let's import material design package into our main.dart and then create main function that build or draw "HomeApp" as root of widget.

// This is main.dart file

import 'package:flutter/material.dart';

void main() => runApp(HomeApp());
1
2
3
4
5

TIP

Please open "widget_test.dart" under "test" folder. There will be await tester.pumpWidget(MyApp()); This should be updated with await tester.pumpWidget(HomeApp()); which is same class name(HomeApp) what you just declared inthe "main.dart"

4. Build class object "HomeApp()"

Fourth, Let's write class object of "HomeApp()"

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp()
   }
}
1
2
3
4
5
6
  • Line 1 code : this is declaration for "HomeApp" Class object with StatelessWidget (there are two types of widget. one is "StatelessWidget" the other is "StatefulWidget" we will go through this definition later in this tutorial.)

TIP

StatelessWidget is immutable once it is built. but StatefulWidget is changed dynamically and can be redrawn within life cycle

  • Line 2 - 3 code : This is build method for HomeApp class object.
  • Line 4 code : This is MaterialApp method from Material design package we already imported.

Extra tutorial - Import custom fonts

A. Download font file from google fonts - Unbuntu

B. Move font files into "assets/fonts"

C. Open "pubspec.yaml" and There will be font setting code inside of "pubspec.yaml" and uncomment them and type like below code and save it

fonts:
    - family: Ubuntu
      fonts:
        - asset: assets/fonts/Ubuntu-Regular.ttf
        - asset: assets/fonts/Ubuntu-Medium.ttf
          style: italic
1
2
3
4
5
6

5. Build appBar

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hello world',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Bar'),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • Line 6 code : This is theme for font family. I brought Ubuntu fonts from google font and put into "/assets/fonts"
  • Line 7 code : Scaffold is a main layout widget from material design package. It organizes its children in a vertical column.
  • Line 8 code : appBar is a widget that is defined in the material design framework. Inside of Appbar as widget, there is another widget "Text"

6. Build body widget

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hello world',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Bar'),
        ),
        body: Center(
          child: Text(
            'hello world',
            style: TextStyle(
              fontSize: 60,
            ),
          ),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  • Line 11 code : body is another widget in the Home Scaffold. Inside of body, there is widget "Center" and inside of Center, there is Text widget, "Hello world" with style - fontSize: 60

7. Draw bottom Navigation Bar

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ....

        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('Business'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              title: Text('School'),
            ),
          ],
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • Line 7 code : Declare BottomNaviationBar as widget.
  • Line 8 - 12 code : Declare "BottomNavigationBarItem" as widget and build icon & text widget inside of it. This is a part that rendered with "Home" icon.

widget_component

8. Final code

import 'package:flutter/material.dart';

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

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hello world',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Bar'),
        ),
        body: Center(
          child: Text(
            'hello world',
            style: TextStyle(
              fontSize: 60,
            ),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('Business'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              title: Text('School'),
            ),
          ],
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

9. Run app on the emulator

$ flutter emulators --launch ios
$ flutter run

1
2
3