[英]Flutter: How can I make my appbar title (which is an image) redirect to home page?
I have a top menu in my app, typical like on an online store (long image which is a logo of my shop on the left side and humburger menu on the right side).我的应用程序中有一个顶部菜单,典型的类似于在线商店(长图像,左侧是我商店的徽标,右侧是汉堡包菜单)。 I am struggling with making the logo redirecting to home page.
我正在努力使徽标重定向到主页。 Is that option even possible?
这个选项甚至可能吗? I was trying many things but I get only errors.
我尝试了很多东西,但我只得到错误。 I am new in all of that and I would appreciate some help.
我是所有这些方面的新手,我将不胜感激。
This is my appBar code which is a separate dart file as I didn't want to duplicate this code in every Scaffold:这是我的 appBar 代码,它是一个单独的 dart 文件,因为我不想在每个脚手架中都复制此代码:
import 'package:flutter/material.dart';
final appBar = AppBar(
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 35.0),
child: GestureDetector(
onTap: () {},
child: Icon(Icons.menu),
)),
],
backgroundColor: Colors.black,
title: Image.asset(
'images/logo.png',
fit: BoxFit.scaleDown,
height: 30,
width: 200,
),
);
Try to wrap your image with a gesture detector then do navigation inside its ontap callback.尝试用手势检测器包裹您的图像,然后在其 ontap 回调中进行导航。 compare with code below... ( NB* do some more reading on navigation https://docs.flutter.dev/cookbook/navigation/navigation-basics )
与下面的代码进行比较...(注意:在导航https://docs.flutter.dev/cookbook/navigation/navigation-basics上做更多阅读)
appBar: AppBar(
title: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
},
child: Image.asset(
'images/logo.png',
fit: BoxFit.scaleDown,
height: 30,
width: 200,
),
),
),
I have another solution just as collo54 shared wrap your image directly in a "GestureDetector" but I would suggest for that kind of Appbar creating a new file "my_app_bar.dart" and creating a statelessWidget that you will just need to call each time you want to show your CustomAppbar widget, like so:我有另一个解决方案,就像 collo54 共享将您的图像直接包装在“GestureDetector”中,但我建议为这种 Appbar 创建一个新文件“my_app_bar.dart”并创建一个 statelessWidget,您只需在每次需要时调用它显示您的 CustomAppbar 小部件,如下所示:
class MyAppBar extends StatelessWidget {
const MyAppBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return AppBar(
title: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
},
child: Image.asset(
'images/logo.png',
fit: BoxFit.scaleDown,
height: 30,
width: 200,
),
),
);
}
}
And then in your HomePage or in whatever page you will just need to call it like so:然后在您的主页或任何页面中,您只需要这样称呼它:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: MyAppBar(),
body: Container(),
);
}
Hope I was able to help you with your question, If you can't access your context you can allways add a global const with a navigatorKey and the call it with the currentContext, makes things real easy!希望我能够帮助您解决您的问题,如果您无法访问您的上下文,您可以随时添加一个带有 navigatorKey 的全局 const 并使用 currentContext 调用它,让事情变得非常简单!
Good luck!祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.