在 flutter 中使用 auto_route 时如何将数据传递到屏幕？
[英]How do I pass data to a screen while using auto_route in flutter?
问题描述
I have a home page with 5 bottomnavbar items (just like instagram) and I need to pass a boolean to one of the pages.
我有一个包含 5 个 bottomnavbar 项目的主页（就像 instagram），我需要将 boolean 传递给其中一个页面。 I'm using auto_route to navigate.我正在使用 auto_route 进行导航。
AutoRoute(
path: '/home',
name: 'HomeRouter',
page: Home,
children: [
AutoRoute(
path: 'timeline',
name: 'TimelineRouter',
page: Timeline,
),
AutoRoute(
path: 'profile',
name: 'ProfileRouter',
page: EmptyRouterPage,
children: [
AutoRoute(
path: '',
page: Profile, <-----
),
AutoRoute(
path: ":currentUserId",
name: "EditProfileRouter",
page: EditProfile,
),
],
),
],
)
I need to pass a boolean to the profile page but I'm not sure how to do that using auto_route.我需要将 boolean 传递到个人资料页面，但我不确定如何使用 auto_route 进行传递。 Any hints?有什么提示吗？ When I passed a boolean, the page received a null value for some reason.当我传递 boolean 时，该页面出于某种原因收到了 null 值。 What could be the possible reason for getting a null value?获得 null 值的可能原因是什么？
3 个解决方案
解决方案1
1 2022-10-08 02:56:41
This answer is coming straight from the auto_route API documentation :这个答案直接来自auto_route API 文档：
AutoRoute automatically detects and handles your page arguments for you, the generated route object will deliver all the arguments your page needs including path/query params.
eg The following page widget will take an argument of type Book.
class BookDetailsPage extends StatelessWidget {
const BookDetailsPage({required this.book});
final Book book;
...
The generated BookDetailsRoute will deliver the same arguments to it's corresponding page.
router.push(BookDetailsRoute(book: book));
解决方案2
0 2022-01-13 17:18:27
I used a bool value on the profile page to remove the leading icon while I am calling on the bottom navbar so I am sharing my code I Hope this will work for you.Thanks
////Bottom Navigation page
import 'package:flutter/material.dart';
import 'package:traveling/helpers/AppColors.dart';
import 'package:traveling/screens/Employee/home/Home.dart';
import 'package:traveling/screens/Employee/profile/Profile.dart';
import 'package:traveling/screens/Employee/setting/Setting.dart';
class EmployeeBottomNavBar extends StatefulWidget {
const EmployeeBottomNavBar({Key? key}) : super(key: key);
@override
_EmployeeBottomNavBarState createState() => _EmployeeBottomNavBarState();
}
class _EmployeeBottomNavBarState extends State<EmployeeBottomNavBar> {
int pageIndex = 0;
bool visible = true;
List<Widget> pageList = <Widget>[EmployeeHome(), EmployeeProfile(leadingIcon: false,), Setting()];
@override
Widget build(BuildContext context) {
return Scaffold(
body: pageList[pageIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.redAccent[400],
currentIndex: pageIndex,
onTap: (value) {
setState(() {
pageIndex = value;
});
},
// type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff2161c0),
),
child: Icon(
Icons.home,
color: AppColors.white,
),
),
icon: Icon(
Icons.home,
color: Color(0xff2161c0),
),
label: ""),
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff2161c0),
),
child: Icon(
Icons.person,
color: AppColors.white,
),
),
icon: Icon(
Icons.person,
color: AppColors.baseLightBlueColor,
),
label: ""),
BottomNavigationBarItem(
activeIcon: Container(
height: 40,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.baseLightBlueColor,
),
child: Icon(
Icons.settings,
color: AppColors.white,
),
),
icon: Icon(
Icons.settings,
color: AppColors.baseLightBlueColor,
),
label: ""),
]
)
);
}
}
///////Profile page
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:traveling/helpers/AppColors.dart';
import 'package:traveling/helpers/AppStrings.dart';
class EmployeeProfile extends StatefulWidget {
final bool leadingIcon;
EmployeeProfile({Key? key, required this.leadingIcon}) : super(key: key);
@override
_EmployeeProfileState createState() => _EmployeeProfileState();
}
class _EmployeeProfileState extends State<EmployeeProfile> {
bool? visible;
double? _width;
File ?_image;
final picker = ImagePicker();
Future<void>_showChoiceDialog(BuildContext context)
{
return showDialog(context: context,builder: (BuildContext context){
return AlertDialog(
title: Text("Choose option",style: TextStyle(color: AppColors.hotelListDarkBlue),),
content: SingleChildScrollView(
child: ListBody(
children: [
Divider(height: 1,color: AppColors.baseLightBlueColor,),
ListTile(
onTap: (){
Navigator.pop(context,_getImage(ImageSource.gallery));
},
title: Text("Gallery",style: TextStyle(color: AppColors.hotelListDarkBlue),),
leading: Icon(Icons.account_box,color: AppColors.baseLightBlueColor,),
),
Divider(height: 1,color: AppColors.baseLightBlueColor,),
ListTile(
onTap: (){
Navigator.pop(context,_getImage(ImageSource.gallery));
},
title: Text("Camera",style: TextStyle(color: AppColors.hotelListDarkBlue),),
leading: Icon(Icons.camera,color: AppColors.baseLightBlueColor,),
),
],
),
),);
});
}
@override
Widget build(BuildContext context) {
_width = MediaQuery.of(context).size.width;
return Scaffold(
body: ListView(
shrinkWrap: true,
children: [
Container(
width: _width!,
color: AppColors.white,
child: Stack(
children: [
Column(
children: [
Material(
color: AppColors.baseLightBlueColor,
elevation: 15,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Container(
height: 180,
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
// AppColors.blue,
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
),
),
Container(
// color: AppColors.green,
width: _width! * 0.90,
height: 140,
margin: EdgeInsets.only(top: 60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppStrings.personalInformation,
// "Informations personelles",
style: TextStyle(
color: Color(0xff919AAA),
),
)
],
),
Row(
children: [
Container(
height: 100,
width: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppStrings.name,
style: TextStyle(
fontSize: 15,
color: AppColors.hotelListDarkBlue,
),
),
Text(
AppStrings.email,
style: TextStyle(
fontSize: 15,
color: AppColors.hotelListDarkBlue,
),
),
Text(
AppStrings.phone,
// "Phone",
style: TextStyle(
fontSize: 15,
color: AppColors.hotelListDarkBlue,
),
),
],
),
),
SizedBox(
height: 100,
width: 30,
),
Container(
height: 100,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Laure Beno",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: AppColors.hotelListDarkBlue,
),
),
Text(
"laure.beno@gmail.com",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: AppColors.hotelListDarkBlue,
),
),
Text("+33 (0)6 45 23 65 77",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: AppColors.hotelListDarkBlue,
)),
],
),
),
],
),
],
),
),
Container(
width: _width! * 0.87,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
AppStrings.myPoetryModes,
style: TextStyle(
color: AppColors.hotelListLightGreyColor,
),
),
Text(
"+ " + AppStrings.add,
style: TextStyle(
color: AppColors.hotelListLightGreyColor,
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
width: _width! * 0.90,
child: atmCard(
cardName: "VISA",
image: "assets/Visa.png",
height: 10)),
Container(
width: _width! * 0.90,
child: atmCard(
cardName: "Master Card",
image: "assets/MasterCard.png",
height: 20)),
],
),
Positioned(
top: 80,
child: _image==null?Stack(
children: [
Container(
height: 150,
width:_width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(60),
border: Border.all(color: AppColors.white, width: 2.0),
image: DecorationImage(
image: AssetImage("assets/managerPicture.jpeg"),fit: BoxFit.cover,
)
/*gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xff00519E),
AppColors.blue,
Colors.blue.shade900,
],
)*/
),
/* child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Image.asset("assets/manager.jpeg",height: 100,width: 100,)
//Icon(Icons.person, size: 100),
// child: Image.asset("assets/logo/profile.png", fit: BoxFit.fill),
),*/
),
],
),
),
Positioned(
top: 60,
right: 0,
left: 100,
bottom: 0,
child: GestureDetector(
onTap: (){
_showChoiceDialog(context);
},
child: Container(
height: 10,
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: AppColors.profiePicBackground,
borderRadius: BorderRadius.circular(60),
//border: Border.all(color: Colors.blue.shade900, width: 2.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Icon(MdiIcons.squareEditOutline,color: AppColors.popUpBlueColor,size: 20,),
),
),
],
),
),
),)
],
):Stack(
children: [
Container(
height: 150,
width:_width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_image!),
),
border: Border.all(color: AppColors.white, width: 2.0),
),
),
],
),
),
Positioned(
top: 60,
right: 0,
left: 100,
bottom: 0,
child: GestureDetector(
onTap: (){
_showChoiceDialog(context);
},
child: Container(
height: 10,
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: AppColors.profiePicBackground,
borderRadius: BorderRadius.circular(60),
//border: Border.all(color: Colors.blue.shade900, width: 2.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: Icon(MdiIcons.squareEditOutline,color: AppColors.popUpBlueColor,size: 20,),
),
),
],
),
),
),)
],
)
),
Positioned(
top: 40,
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left:8,right: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
widget.leadingIcon == true
? Align(
alignment: Alignment.topLeft,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
MdiIcons.arrowLeft,
color: Colors.white,
)),
)
: Container(),
Align(
alignment: Alignment.topCenter,
child: Text(AppStrings.myAccount,
style: TextStyle(
fontSize: 15,
color: AppColors.white,
fontWeight: FontWeight.bold)),
),
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {},
child: Icon(
MdiIcons.pencilOutline,
color: AppColors.white,
)),
),
],
),
)
),
],
),
),
],
),
);
}
//ImageSource: Camera and Gallery.
_getImage(ImageSource imageSource) async
{
PickedFile? imageFile = await picker.getImage(source: imageSource);
//if user doesn't take any image, just return.
if (imageFile == null) return;
setState(
() {
//Rebuild UI with the selected image.
_image = File(imageFile.path);
},
);
}
Widget atmCard({String? image, String? cardName, double? height}) {
return GestureDetector(
onTap: () {
// Navigator.push(
// context, MaterialPageRoute(builder: (context) => Class()));
},
child: Card(
elevation: 2,
margin: EdgeInsets.only(bottom: 15, right: 5, left: 5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 80,
// width: _width! * 0.90,
padding: EdgeInsets.only(
// top: 5,
left: 20,
// right: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15), color: Colors.white),
child: Row(
children: [
Image.asset(
image.toString(),
height: height,
),
//Icon(Icons.atm,color: AppColors.hotelListDarkBlue,),
SizedBox(
width: 30,
),
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
cardName.toString(),
// "MasterCard",
style: TextStyle(
color: AppColors.hotelListDarkBlue,
fontSize: 12,
fontWeight: FontWeight.bold),
),
Text(
"4******12345678",
style: TextStyle(
fontSize: 14,
color: AppColors.hotelListLightGreyColor),
),
],
),
)
],
),
),
),
);
}
}
解决方案3
0 2023-01-25 11:06:51
You can define your path arguments like this in autoRoute class :
AutoRoute(page: TrackAttendancePage, path: 'track-attendance/:id')
Then in your page pass them as argument using @PathParam
class TrackAttendancePage extends StatefulWidget {
final String registerId;
const TrackAttendancePage(@PathParam('id') this.registerId,{Key? key})
: super(key: key);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Flutter 自动路线 | 如何使用 BlocProvider 包装路由？ - Flutter auto_route | How do I wrap a route with BlocProvider?
当用户输入 URL 地址时，如何在 flutter 中传入 arguments（使用 auto_route） - How to pass in arguments in flutter when user input URL address (using auto_route)
Flutter 使用 auto_route 删除所有路由 - Flutter remove all routes using auto_route
在 Flutter auto_route package 中，我需要将构建器转换为什么类型？ - In Flutter auto_route package, what type do I need to cast the builder as?
如何向 auto_route 1.0.0-beta.10 添加路由保护？ - How do I add a route guard to auto_route 1.0.0-beta.10?
如何使用带有 auto_route 的嵌套路由在 Flutter 中的屏幕之间导航 - How to navigate between screens in Flutter using nested routing with auto_route
Flutter - auto_route _CustomNavigatorState 错误 - Flutter - auto_route _CustomNavigatorState error
flutter web auto_route：维护模式 - flutter web auto_route: Maintenance Mode
使用 auto_route 和 flutter_bloc 库导航页面不起作用 - Using the auto_route and flutter_bloc libraries to navigate page not working
如何在 Flutter 中同时实现 device_preview 和 auto_route 包 - How to implement both device_preview and auto_route packages in Flutter
相关标签