Tutorial Flutter Membuat Halaman Dashboard

Setelah membuat form pendaftaran dan form masuk di flutter, sekarang kita akan membasah tentang Tutorial Flutter Membuat Halaman Dashboard. Pada halaman dashboard ini kita akan memiliki 2 menu, yaitu menu dashboard dan menu profil. Artikel ini akan melanjutkan artikel kami sebelumnya Tutorial Flutter Form Login dan Daftar dengan BLoC. Kurang lebih seperti ini tampilan dahsboard yang akan kita buat.

Navigation Drawer
Tampilan Drawer atau Menu

 

Halaman Dashboard
Halaman Dashboard

 

Halaman Profile
Halaman Profile

Membuat Navigasi pada Flutter

Pertama kita akan mengubah pada file main.dart, kita akan mengubah ketika state di AuthenticationBloc adalah Authenticated menjadi

if (state is Authenticated) {
           return BlocProvider(
               create: (context) => MenuBloc(),
               child:HomeScreen(user:state.user ,)
           );
         }

Seperti yang anda lihat kita  meliki MenuBloc, Menu bloc itu berguna sebagai pengatur navigasi. Pertama buatlah folder bernama menu_bloc, kemudian salin dan simpan kode dibawah ini didalam nya

bloc.dart

export 'menu_bloc.dart';
export 'menu_event.dart';
export 'menu_state.dart';

menu_bloc.dart

class MenuBloc extends Bloc<MenuEvent, MenuState> {
  @override
  MenuState get initialState => OpenDashboard();

  @override
  Stream<MenuState> mapEventToState(
    MenuEvent event,
  ) async* {

    yield Loading();
    if (event is DashboardClicked) {
      yield OpenDashboard();
    }
    if (event is ProfileClicked) {
      yield OpenProfile();
    }

  }
}

menu_event.dart

abstract class MenuEvent{
  @override
  List<Object> get props => [];
}

class LoadDefaultMenu extends MenuEvent {}

class DashboardClicked extends MenuEvent {}

class ProfileClicked extends MenuEvent {}

class LogoutClicked extends MenuEvent {}

menu_state.dart

abstract class MenuState extends Equatable {
  const MenuState();

  @override
  List<Object> get props => [];
}

class Loading extends MenuState {}

class OpenDashboard extends MenuState {}

class OpenProfile extends MenuState {}

Pada pembuatan drawer kita akan menggunakan model, model ini bernama Menu.dart berikut isinya

class Menu {
  String title;
  IconData icon;
  MenuEvent menuEvent;

  Menu({this.title, this.icon, this.menuEvent});
}

simpan didalam folder model.



Langkah selanjutnya adalah kita akan membuat file dart baru dengan nama home_screen.dart , berikut isinya

class HomeScreen extends StatefulWidget {
  final User user;

  HomeScreen({Key key, @required this.user}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  List<Menu> navigationItems = [
    Menu(
      title: 'Dashboard',
      icon: Icons.insert_chart,
      menuEvent: DashboardClicked(),
    ),
    Menu(
      title: 'Profil',
      icon: Icons.person,
      menuEvent: ProfileClicked(),
    ),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final MenuBloc menuBloc = BlocProvider.of<MenuBloc>(context);
    return Scaffold(
        key: _scaffoldKey,
        backgroundColor: Colors.white,
        drawer: Drawer(
          child: myDrawer(menuBloc),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: MediaQuery.of(context).padding.top,
              ),
              getAppBarUI(),
              Expanded(
                child: SingleChildScrollView(
                  child: Container(
                    height: MediaQuery.of(context).size.height,
                    child:  Padding(
                      padding: EdgeInsets.all(20),
                      child: BlocBuilder<MenuBloc, MenuState>(
                        builder: (context, state) {
                          if (state is OpenDashboard) {
                            return Dashboard();
                          }
                          if (state is OpenProfile) {
                            return Profile(user: widget.user);
                          }
                          return SplashScreen();
                        },
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ));
  }

  Widget getAppBarUI() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
            bottomLeft: Radius.circular(10),
            bottomRight: Radius.circular(10)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            spreadRadius: 5,
            blurRadius: 2,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.only(top: 8.0, left: 18, right: 18),
        child: Row(
          children: <Widget>[
            InkWell(
              child: Icon(Icons.menu, color: MyAppTheme.nearlyBlue),
              onTap: () {
                if (!_scaffoldKey.currentState.isDrawerOpen) {
                  _scaffoldKey.currentState.openDrawer();
                } else {
                  _scaffoldKey.currentState.deactivate();
                }
              },
            ),
            SizedBox(
              width: 20,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Hai',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 14,
                      letterSpacing: 0.2,
                      color: MyAppTheme.grey,
                    ),
                  ),
                  Text(
                    widget.user.fullName,
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                      letterSpacing: 0.27,
                      color: MyAppTheme.darkerText,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: 60,
              height: 60,
              child: InkWell(
                child:  Icon(
                  Icons.exit_to_app,
                  color: Colors.lightBlueAccent,
                ),
                onTap: (){
                  BlocProvider.of<AuthenticationBloc>(context).add(
                    LoggedOut(),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget myDrawer(menuBloc) {
    return Drawer(
      child: Container(
        constraints: new BoxConstraints.expand(
          width: MediaQuery.of(context).size.width - 20,
        ),
        color: Colors.white,
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(color:MyAppTheme.nearlyBlue),
              child: UserAccountsDrawerHeader(
                decoration: BoxDecoration(color: MyAppTheme.nearlyBlue),
                accountName: Text(widget.user.fullName),
                accountEmail: Text(widget.user.email),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: NetworkImage(
                      (widget.user.imageFileName.length) > 0
                          ? widget.user.imageFileName
                          : 'https://via.placeholder.com/250'),
                ),
              ),
            ),
            Expanded(
              child: ListView.builder(
                padding: const EdgeInsets.only(top: 0.0),
                itemCount: navigationItems.length,
                itemBuilder: (context, counter) {
                  return Material(
                    color: Colors.white,
                    child: InkWell(
                      child: ListTile(
                        title: Text(navigationItems[counter].title),
                        leading: Icon(navigationItems[counter].icon),
                        onTap: () {
                          if (_scaffoldKey.currentState.isDrawerOpen) {
                            _scaffoldKey.currentState.openEndDrawer();
                          }
                          menuBloc.add(navigationItems[counter].menuEvent);
                        },
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

kita meng-generate list menu dari bagian

List<Menu> navigationItems = [
    Menu(
      title: 'Dashboard',
      icon: Icons.insert_chart,
      menuEvent: DashboardClicked(),
    ),
    Menu(
      title: 'Profile',
      icon: Icons.person,
      menuEvent: ProfileClicked(),
    ),
  ];

parameter menuEvent berisi event yang berada di BLoC menu kita. Jadi setiap event yang kita klik akan merubah isi page yang akan di baca pada bagian

BlocBuilder<MenuBloc, MenuState>(
         builder: (context, state) {
            if (state is OpenDashboard) {
                  return Dashboard();
            }
           if (state is OpenProfile) {
                 return Profile(user: widget.user);
              }
               return SplashScreen();
  },

Kemudian kita akan membuat file Dashboard nya

dashboard.dart

class Dashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 8.0, left: 18, right: 16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
         Row(
           children: <Widget>[
             Text(
               'Dashboard',
               textAlign: TextAlign.left,
               style: TextStyle(
                 fontWeight: FontWeight.w600,
                 fontSize: 22,
                 letterSpacing: 0.27,
                 color: MyAppTheme.darkerText,
               ),
             ),
           ],
         ),
          SizedBox(
            width: 200,
            child: Divider(),
          ),
          Row(
            children: <Widget>[
              Flexible(
                  child: Text("ISI DASHBOARD")
              )
            ],
          ),

        ],
      ),
    );
  }
}

dan profile.dart

profile.dart

class Profile extends StatefulWidget {
  User user;

  Profile({@required this.user});

  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  File _image;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 8.0, left: 18, right: 16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Text(
                'Profile',
                textAlign: TextAlign.left,
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 22,
                  letterSpacing: 0.27,
                  color: MyAppTheme.darkerText,
                ),
              ),
            ],
          ),
          SizedBox(
            width: 200,
            child: Divider(),
          ),
          Row(
            children: <Widget>[Flexible(child: Text("ISI Profile"))],
          ),
        ],
      ),
    );
  }
}

sekian artikel Tutorial Flutter Membuat Halaman Dashboard, semoga bermanfaat

Tinggalkan Balasan

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!

%d blogger menyukai ini: