This is a design I want:

This is my current design:

Hello, how to make the button change color when pressed and go to the page that is pressed. For example, when you press the profile button, the color will change when. When you go to another page, the button will change color to white. Can anyone help me?

This is my code:

ElevatedButton(
                                   style: ButtonStyle(
                                      padding: MaterialStateProperty.all(
                                        EdgeInsets.fromLTRB(30, 20, 30, 20),
                                      ),
                                     // overlayColor: MaterialStateProperty.all(Colors.red),
                                      backgroundColor: MaterialStateProperty
                                          .resolveWith<Color>(
                                              (Set<MaterialState> states) {
                                        if (states
                                            .contains(MaterialState.pressed))
                                        return Colors.blue;
                                          return Color.fromARGB(
                                              255, 0, 79, 143);
                                      }),
                                    ),
                              
                                    onPressed: () {},
                                    
                                    child: new Text('Profile',
                                        style: TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.normal)),
                                  ),

CodePudding user response：

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool change = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: change ? Colors.blue : Colors.white,
                ),
                onPressed: () {
                  setState(() {
                    change = true;
                  });
                },
                child: Text('Profile',
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.normal,
                        color: change ? Colors.white : Colors.black)),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: !change ? Colors.blue : Colors.white,
                ),
                onPressed: () {
                  setState(() {
                    change = false;
                  });
                },
                child: Text('Home',
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.normal,
                        color: !change ? Colors.white : Colors.black)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

You can consider using TabBar, it is made for these types of navigations.