Scrolling Widget

List View

widget_component

List view widget is a "scrollable list of widgets arranged linearly" It is mostly used as scrolling widget.

widget_component

1. Modulize App file

In this tutorial, i would like to modulize UI component into separated dart files. As you see above, homePage.dart is connected into main.dart and homePage.dart is consists of four different UI components. i will make them as separated files and import into homePage.dart files. This approach will help you understand code better and efficient ways.

This is home_page.dart

import 'package:flutter/material.dart';
import '../component/appbar.dart';
import '../component/bottomNavbar.dart';
import '../component/drawer.dart';
import '../component/body.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarWidget.drawAppBar('Tutorial Page'),
      body: BodyWidget.drawBody(),
      bottomNavigationBar: BottomNavBarWidget.drawBottomNavbar(),
      drawer: DrawerWidget.drawDrawer(context),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • Line 2 - 5 code : Import separated UI component into homePage.dart

Here is appbar.dart as modular component class. other component will be similar way of defining class object.

import 'package:flutter/material.dart';

class AppBarWidget {
  static drawAppBar(String title) {
    return AppBar(
      title: Text(title),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.search),
          tooltip: 'search',
          onPressed: null,
        )
      ],
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • Line 3 code : Define AppBarWidget class
  • Line 4 code : Declare "drawAppBar" method inside with parameter of "string title". This method will get parameter as string.
  • Line 5 code : return Appbar widget into it.

Here is bottomNavbar.dart

import 'package:flutter/material.dart';

class BottomNavBarWidget {
  static drawBottomNavbar() {
    return 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

Here is drawer.dart

import 'package:flutter/material.dart';

class DrawerWidget {
  static drawDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.all(0),
        children: <Widget>[
          UserAccountsDrawerHeader(
            currentAccountPicture: CircleAvatar(
              backgroundColor: Colors.white,
              child: Icon(
                Icons.people,
                size: 40,
                color: Colors.lightBlueAccent,
              ),
            ),
            accountName: Text(
              'David Muller',
              style: TextStyle(fontSize: 25),
            ),
            accountEmail: Text('abcdefg@gmail.com'),
            decoration: BoxDecoration(
              color: Colors.lightBlueAccent,
            ),
          ),
          ListTile(
            title: Text(
              'tutorial',
              style: TextStyle(fontSize: 18),
            ),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/a');
            },
          ),
          ListTile(
            title: Text(
              'about',
              style: TextStyle(fontSize: 18),
            ),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/b');
            },
          ),
        ],
      ),
    );
  }
}

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
44
45
46
47
48
49
50
51
52
53
54

2. Body Content

So Let's take look at body content.


Let me explain App UI with words.

  1. Let's add image widget on the body

  2. Add list tile elements


Here is body.dart as UI component.

import 'package:flutter/material.dart';

class BodyWidget {
  static drawBody() {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Card(
          child: Image.asset(
            'assets/court.jpg',
            fit: BoxFit.fill,
          ),
          elevation: 5,
          margin: EdgeInsets.all(10),
        ),
        ListTile(
          title: Text(
            'Basketball',
            style: TextStyle(fontSize: 20),
          ),
          trailing: Icon(Icons.bookmark),
        ),
        Divider(),
        ListTile(
          title: Text(
            'Scoccer',
            style: TextStyle(fontSize: 20),
          ),
          trailing: Icon(Icons.bookmark),
        ),
        Divider(),
        ListTile(
          title: Text(
            'Baseball',
            style: TextStyle(fontSize: 20),
          ),
          trailing: Icon(Icons.bookmark),
        ),
        Divider(),
      ],
    );
  }
}


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
44
45
  • Line 3 - 4 code : Define class BodyWidget and define method drawBody function.
  • Line 5 code : Frome here, this is listview.
  • Line 6 code : Make padding around it
  • Line 8 - 15 code : Inside of Listview, there will be Card widget and inside of it, there is image widget.
  • Line 16 - 22 code : This is ListTile which is a single fixed-height row that typically contains some text as well as a leading or trailing icon"
  • Line 23 code : Divider widget is line that make that separated visually.

3. Let's take look at details about how to add image into flutter.

  • Create "assets folder on the root of your flutter project
  • Save image file you want add in flutter screen into assets folder
  • Open pubspec.yaml in your flutter project path and then find "assets". and uncomment them add code like below.
 assets:
   - assets/court.jpg
1
2

There are two way of adding image in flutter. one is Image.asset and the other is Image.network. Acutally there are more.

child: Image.asset(
    'assets/court.jpg',
    fit: BoxFit.fill,
),
1
2
3
4

Adding Network images

child: Image.network(
    "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
),
1
2
3