[英]Circle Profile Image on Sliver Appbar
I'm trying to include a circle profile image button on my sliver app bar but the sliver app bar isn't quite rendering it right. 我正在尝试在银条应用程序栏上添加一个圆形轮廓图像按钮,但银条应用程序栏显示效果不佳。 This is what i'm getting, how can I achieve a circle profile image on a sliver app bar?
这就是我得到的,如何在条形应用栏上获得圆形轮廓图像?
My Code: 我的代码:
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Home'),
leading: Container(),
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {}),
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
image: DecorationImage(image: AssetImage('assets/images/blank_profile.png'))
),
),
onTap: () => Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => ProfilePage())),
),
),
],
),
Using a CircleAvatar : 使用CircleAvatar:
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Home'),
backgroundColor: Colors.deepOrange,
leading: Container(),
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {}),
CircleAvatar(
backgroundImage: AssetImage('assets/images/blank_profile.png'),
minRadius: 28,
),
],
),
For that you have to use CircleAvatar for that. 为此,您必须使用CircleAvatar 。
This is the code you can use: 这是您可以使用的代码:
SliverAppBar(
title: Text('Home'),
leading: Container(),
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {}),
CircleAvatar(
child: ClipOval(
child: Image.asset('assets/images/blank_profile.png'),
),
),
],
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.