How can I achive this design in my flutter app?

Question

Here I need some help in my category Filter page UI.

(sorry for video link) video for better understanding...

I've upload the demo video in my drive... Here The Video Demo Link

Here is my trying code work good, but I don't know,How can I pass Navigate...

If you have any tutorial or any example please share with me.

// ignore_for_file: unused_field, must_be_immutable

import 'package:duaredoctor_app/src/configs/appColors.dart';
import 'package:duaredoctor_app/src/configs/appUtils.dart';
import 'package:duaredoctor_app/src/dummyData/homeCategoryList.dart';
import 'package:duaredoctor_app/src/pages/homePage.dart';
import 'package:duaredoctor_app/src/widgets/customCardWidget.dart';
import 'package:duaredoctor_app/src/widgets/kText.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class StorePage extends StatelessWidget {
  int _currentTab = 1;
  final PageStorageBucket bucket = PageStorageBucket();
  Widget _currentScreens = HomePage();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100),
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: SizedBox(
            height: 40,
            child: TextFormField(
              decoration: InputDecoration(
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(
                    color: blue,
                    width: .50,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(
                    color: black45,
                    width: .50,
                  ),
                ),
                contentPadding: EdgeInsets.symmetric(horizontal: 20),
                hintText: 'Search...',
                prefixIcon: Icon(
                  Icons.search,
                  color: black45,
                ),
              ),
            ),
          ),
        ),
      ),
      body: ListView(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        primary: false,
        children: [
          ListView(
            shrinkWrap: true,
            primary: false,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 600,
                    width: 90,
                    // color: greenDark,
                    child: ListView.builder(
                      shrinkWrap: true,
                      primary: false,
                      itemCount: allCategoryList.length,
                      itemBuilder: ((context, index) {
                        final item = allCategoryList[index];

                        return Container(
                          height: 120,
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: 4,
                              vertical: 4,
                            ),
                            child: CustomCardWidget(
                              child: Column(
                                children: [
                                  Image.asset(
                                    item.image.toString(),
                                  ),
                                  KText(
                                    text: item.text.toString(),
                                    fontSize: 12,
                                    color: black,
                                    textAlign: TextAlign.center,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ],
                              ),
                              isRadius: true,
                            ),
                          ),
                        );
                      }),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      height: 1500,
                      width: Get.width / 2,
                      color: green50,
                      child: PageStorage(
                        bucket: bucket,
                        child: _currentScreens,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
          sizeH20,
        ],
      ),
    );
  }
}

class TestListData1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: KText(
          text: 'Test1',
        ),
      ),
    );
  }
}

class TestListData2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: KText(
          text: 'Test2',
        ),
      ),
    );
  }
}

class TestListData3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: KText(
          text: 'Test3',
        ),
      ),
    );
  }
}

Answer 1

Use NavigationRail widget to get your desire result. You will try like this...

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

 void main() {
  runApp(MyApp());
 }

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData.dark().copyWith(
    scaffoldBackgroundColor: darkBlue,
  ),
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Center(
      child: CategoriesPage(),
    ),
   ),
  );
 }
}

class CategoriesPage extends StatefulWidget {
 @override
 _CategoriesPageState createState() => _CategoriesPageState();
}

class _CategoriesPageState extends State<CategoriesPage> {
  int _selectedIndex = 0;

  bool showNavigationBar = false;

  var list = [
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
   AllCategory(),
 ];

 var title = [
"All Category",
'WalkPage',
'LocationPage',
'NotificationPage',
'SettingsPage',
'SearchPage',
"All Category",
'WalkPage',
'LocationPage',
'NotificationPage',
'SettingsPage',
'SearchPage',
'LocationPage',
'NotificationPage',
'SettingsPage',
'SearchPage'
];

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    leading: IconButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      icon: const Icon(
        Icons.arrow_back,
        color: Colors.white,
      ),
    ),
    title: Text(
      title[_selectedIndex],
      style: const TextStyle(color: Colors.white),
     ),
     ),
     body: Row(
      children: <Widget>[
      LayoutBuilder(
        builder: (context, constraint) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraint.maxHeight),
              child: IntrinsicHeight(
                child: NavigationRail(
                  selectedIndex: _selectedIndex,
                  elevation: 10,
                  backgroundColor: Colors.white,
                  selectedIconTheme: IconThemeData(
                      color: Theme.of(context).primaryColor, size: 30),
                  unselectedIconTheme:
                      const IconThemeData(color: Colors.grey, size: 20),
                  selectedLabelTextStyle: TextStyle(
                      color: Theme.of(context).primaryColor,
                      fontWeight: FontWeight.bold,
                      fontSize: 18),
                  unselectedLabelTextStyle: const TextStyle(
                      color: Colors.grey,
                      fontWeight: FontWeight.normal,
                      fontSize: 16),
                  onDestinationSelected: (int index) {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  labelType: NavigationRailLabelType.all,
                  destinations: const [
                    NavigationRailDestination(
                      icon: Icon(Icons.favorite_border),
                      selectedIcon: Icon(Icons.favorite),
                      label: Text('All Category'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.bookmark_border),
                      selectedIcon: Icon(Icons.book),
                      label: Text('Walk'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.star_border),
                      selectedIcon: Icon(Icons.star),
                      label: Text('Location'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.favorite_border),
                      selectedIcon: Icon(Icons.favorite),
                      label: Text('Notification'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.bookmark_border),
                      selectedIcon: Icon(Icons.book),
                      label: Text('Settings'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.star_border),
                      selectedIcon: Icon(Icons.star),
                      label: Text('Search'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.bookmark_border),
                      selectedIcon: Icon(Icons.book),
                      label: Text('Home'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.star_border),
                      selectedIcon: Icon(Icons.star),
                      label: Text('Walk'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.favorite_border),
                      selectedIcon: Icon(Icons.favorite),
                      label: Text('Location'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.bookmark_border),
                      selectedIcon: Icon(Icons.book),
                      label: Text('Notifications'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.star_border),
                      selectedIcon: Icon(Icons.star),
                      label: Text('Settings'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.bookmark_border),
                      selectedIcon: Icon(Icons.book),
                      label: Text('Search'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.star_border),
                      selectedIcon: Icon(Icons.star),
                      label: Text('Location'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.favorite_border),
                      selectedIcon: Icon(Icons.favorite),
                      label: Text('Notifications'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.bookmark_border),
                      selectedIcon: Icon(Icons.book),
                      label: Text('Location'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.star_border),
                      selectedIcon: Icon(Icons.star),
                      label: Text('Search'),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
      const VerticalDivider(thickness: 1, width: 1),
      // This is the main content.
      Expanded(child: list[_selectedIndex])
    ],
  ),
);
}
}

class AllCategory extends StatefulWidget {
 @override
_AllCategoryState createState() => _AllCategoryState();
 }

class _AllCategoryState extends State<AllCategory> {
 @override
 Widget build(BuildContext context) {
  return ListView(
  padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
  children: [
    Container(
      height: MediaQuery.of(context).size.height * 0.15,
      decoration: BoxDecoration(
        border: Border.all(
          width: 2,
          color: Colors.amber,
        ),
      ),
      child:Image.network('https://picsum.photos/250?image=1'),
    ),
    Container(
      height: MediaQuery.of(context).size.height * 0.06,
      padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
      child: const Text(
        'Just For You',
        textAlign: TextAlign.center,
      ),
    ),
    ReusableCategory(),
  ],
);
}
}

 class ReusableCategory extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  //final products = Provider.of<ProductProvider>(context, listen: false).items;
return GridView(
  shrinkWrap: true,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  children: [
    Image.network('https://picsum.photos/250?image=1'),
    Image.network('https://picsum.photos/250?image=2'),
    Image.network('https://picsum.photos/250?image=3'),
    Image.network('https://picsum.photos/250?image=4'),
    Image.network('https://picsum.photos/250?image=1'),
    Image.network('https://picsum.photos/250?image=2'),
    Image.network('https://picsum.photos/250?image=3'),
    Image.network('https://picsum.photos/250?image=4'),
    Image.network('https://picsum.photos/250?image=1'),
    Image.network('https://picsum.photos/250?image=2'),
    Image.network('https://picsum.photos/250?image=3'),
    Image.network('https://picsum.photos/250?image=4'),
  ],
);
 }
 }

result:

Answer 2

here with the Help of Row and Expanded widget you can achieve your UI. here is the example of that.

           Scaffold(
              body: Row(
                children: [
                  Expanded(
                    flex: 2,
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text("$index"),
                        );
                      },
                    ),
                  ),
                  Expanded(
                    flex: 8,
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        return ListTile(
                          tileColor: index.isEven ? Colors.white : Colors.grey.withOpacity(0.1),
                          title: Text("$index"),
                        );
                      },
                    ),
                  ),
                ],
              ),
            )