[英]How can I achive this design in my flutter app?
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',
),
),
);
}
}
Use NavigationRail widget to get your desire result.使用 NavigationRail 小部件获得您想要的结果。 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:结果:
here with the Help of Row and Expanded widget you can achieve your UI.在这里借助 Row 和 Expanded 小部件,您可以实现您的 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"),
);
},
),
),
],
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.