Go to specific section when button clicked in flutter

user_15194931 0
Viewed 65

I am trying to navigate the section on the same page when the button is clicked but I can not do it using PageView and Scroll, Does anyone know how to do it?

enter image description here

This is the navigation bar on the top of the page and I want it to go to specific section on the same page when the button is clicked. this is my code:

     Row(
              children: [
                NavItem(
                  title: 'Home',
                  onPreesed: () {},
                  color: KprimaryColor,
                  fontWeight: FontWeight.w900,
                ),
                NavItem(
                  title: 'About',
                  onPreesed: () {},
                  color: Colors.black,
                  fontWeight: FontWeight.normal,
                ),
                NavItem(
                  title: 'Projects',
                  onPreesed: () {},
                  color: Colors.black,
                  fontWeight: FontWeight.normal,
                ),
                NavItem(
                  title: 'Contact',
                  onPreesed: () {},
                  color: Colors.black,
                  fontWeight: FontWeight.normal,
                ),
flutter web
1 Answers

Please, try this!

class MyAppTabView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            title: Text('Flutter Tabs', style: TextStyle(color: Colors.black)),
            bottom: const PreferredSize(
              preferredSize: Size.fromHeight(40),
              child: Align(
                alignment: Alignment.centerRight,
                child: TabBar(
                    isScrollable: true,
                    unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
                    unselectedLabelColor: Colors.black,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorColor: Colors.transparent,
                    labelColor: Colors.red,
                    labelStyle: TextStyle(fontWeight: FontWeight.bold),
                    tabs: [
                      Tab(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 20),
                          child: Center(
                            child: Text("Home"),
                          ),
                        ),
                      ),
                      Tab(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 20),
                          child: Center(
                            child: Text("About"),
                          ),
                        ),
                      ),
                      Tab(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 20),
                          child: Center(
                            child: Text("Projects"),
                          ),
                        ),
                      ),
                      Tab(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 20),
                          child: Center(
                            child: Text("Contact"),
                          ),
                        ),
                      ),
                    ]),
              ),
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Home")),
              Center(child: Text("About")),
              Center(child: Text("Projects")),
              Center(child: Text("Contact")),
            ],
          ),
        ),
      ),
    );
  }
}

Enjoy Coding!!

user_154081430
Related