Question 78512 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make each _buildrow go the next page in Flutter?

i got problem when i dont know to make each buildrow go to each page?this is for buildDrawer can you help me with this?

builDrawer fuction this for profile screen.dart

  _buildDrawer() {
    return ClipPath(
      clipper: OvalRightBorderClipper(),
      child: Drawer(
                  Container(
                    height: 90,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient:
                            LinearGradient(colors: [Colors.pink, Colors.red])),
                    child: CircleAvatar(
                      radius: 40,
                      backgroundImage: NetworkImage(profile),
                    ),
                  ),
                  SizedBox(height: 5.0),
                  Text(
                    "Mohd Amin bin Yaakob",
                    style: TextStyle(color: Colors.white, fontSize: 18.0),
                  ),
                  Text(
                    "Pegawai",
                    style: TextStyle(color: active, fontSize: 16.0),
                  ),
                  SizedBox(height: 30.0),
                  _buildRow(Icons.home, "Home"),
                  _buildDivider(),
                  _buildRow(Icons.person_pin, "Your profile"),
                  _buildDivider(),
                  _buildRow(Icons.settings, "Settings"),
                  _buildDivider(),
                  _buildRow(Icons.email, "Contact us"),
                  _buildDivider(),
                  _buildRow(Icons.info_outline, "Help"),
                  _buildDivider(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

How to make Functional Navigator each buildRow

Tags:

2

Answers


  1. 0

    You need to make rows with clickable widgets like listtile.

    Try this inside your _buildRow()

    Widget _buildRow(IconData icon, String title) { 
   final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0); 
   return ListTile(
         title: Text( title, style: tStyle, ),
         leading: Icon( icon, color: active, ),
         onTap: () {
          // Your navigation code here
         },
   ); 
}

    You can remove the container as well and try contentPadding in ListTile

    Its explained in the drawer documentation https://docs.flutter.dev/cookbook/design/drawer

    Login or Signup to reply.
  2. 0

    You can require an onTap function in your _buildRow method. Also wrap you Container inside an InkWell widget and this function in onTap property.
    Following is the revised code:

    Widget _buildRow(IconData icon, String title, VoidCallback onTap) {
  final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
  return InkWell(
    child: Container(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: [
          Icon(
            icon,
            color: active,
          ),
          SizedBox(width: 10.0),
          Text(
            title,
            style: tStyle,
          ),
        ],
      ),
    ),
    onTap: onTap,
  );
}

    When calling the above function, provide the onTap callback like this:

    _buildRow(Icons.home, "Home", () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) {
            return HomePage();
          },
        ),
      );
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search