如何在我的 flutter 应用程序中实现此设计？

Question

在这里，我需要一些关于我的类别过滤器页面 UI 的帮助。

（对不起视频链接）视频为了更好地理解......

我已经在我的驱动器中上传了演示视频...... 这里是视频演示链接

这是我尝试的代码，效果很好，但我不知道，我怎样才能通过导航...

如果您有任何教程或示例，请与我分享。

// 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

使用 NavigationRail 小部件获得您想要的结果。 你会像这样尝试......

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'),
  ],
);
 }
 }

结果：

Answer 2

在这里借助 Row 和 Expanded 小部件，您可以实现您的 UI。 这是一个例子。

           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"),
                        );
                      },
                    ),
                  ),
                ],
              ),
            )