Navigation (Sidebar)

`screens/sidemenu.dart`

Location

magaza_ui/screens/sidemenu.dart

It has the profile name, photo avatar, but it also contains a list of links for all screens in the app. Below is a code snippet of the links

Container(
  padding: EdgeInsets.fromLTRB(0, 0, 0, 16),
  color: Color.fromRGBO(28, 27, 27, 1),
  child: Column(
    children: <Widget>[
      SizedBox(height: 30,),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
          title: Text('Favourites', style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w600,
              fontFamily: 'Montserrat',
              fontSize: 18
          ),),
          onTap: (){
            Navigator.pushNamed(context, '/favourite');
          },
          leading: Icon(Icons.favorite, color: Colors.white,),
          trailing: Container(
              padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
              width: 30,
              height: 30,
              child: Container(
                padding: EdgeInsets.fromLTRB(0, 3, 0, 0),
                decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(90)
                ),
                child: Text('89', textAlign: TextAlign.center, style: TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w600
                )),
              ))
      ),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
        title: Text('Home', style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            fontSize: 18
        ),),
        leading: Icon(Icons.home, color: Colors.white,),
        onTap: (){
          Navigator.pushNamed(context, '/home');
        },
      ),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
        onTap: (){
          Navigator.pushNamed(context, '/detail');
        },
        title: Text('Detail Page', style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            fontSize: 18
        ),),
        leading: Icon(Icons.book, color: Colors.white,),
      ),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
        onTap: (){
          Navigator.pushNamed(context, '/search');
        },
        title: Text('Search', style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            fontSize: 18
        ),),
        leading: Icon(Icons.search, color: Colors.white,),
      ),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
        onTap: (){
          Navigator.pushNamed(context, '/profile');
        },
        title: Text('Profile', style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            fontSize: 18
        ),),
        leading: Icon(Icons.person, color: Colors.white,),
      ),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
        onTap: (){
          Navigator.pushNamed(context, '/story-highlight');
        },
        title: Text('Special Story', style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            fontSize: 18
        ),),
        leading: Icon(Icons.star, color: Colors.white,),
      ),
      Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
      ListTile(
        title: Text('Logout', style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
            fontSize: 18
        ),),
        onTap: (){
          return showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: Text('Want to logout?'),
              actions: <Widget>[
                FlatButton(
                  onPressed: () => Navigator.of(context).pop(false),
                  child: Text('No'),
                ),
                FlatButton(
                  onPressed: () => Navigator.pushNamedAndRemoveUntil(context, '/login', (_) => false),
                  child: Text('Yes'),
                ),
              ],
            ),
          );
        },
        leading: Icon(Icons.exit_to_app, color: Colors.white,),
      ),
    ],
  ),
)

Adding new sidebar link

Paste this pair of code into the last set of Divider+ListTile

Divider( height: 1, color: Color.fromRGBO(51, 50, 50, 1)),
ListTile(
  onTap: (){
    Navigator.pushNamed(context, '/story-highlight');
  },
  title: Text('Special Story', style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.w600,
      fontFamily: 'Montserrat',
      fontSize: 18
  ),),
  leading: Icon(Icons.star, color: Colors.white,),
),

In the above code snippet, change your '/story-highlight' to any route that you have already defined in your routes