简体   繁体   English

Sliver Appbar上的圈轮廓图像

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM