如何在颤动中制作这样的自定义应用栏？答案

【问题标题】：How to make custom appbar like this in flutter?如何在颤动中制作这样的自定义应用栏？
【发布时间】：2021-10-24 04:11:52
【问题描述】：

我自己设计并尝试使用这种设计所以它可以像我的设计一样吗？？

但我不明白如何将此按钮放入 appbar[action] 因为当我填充该按钮时，该按钮占据全高

我在这里编写的代码将其用作小部件，然后我在 appbar 调用使用

AppBar _profileAppbar(
  context,
) {
  return AppBar(
    automaticallyImplyLeading: false,

    title: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(
          "state.username",
          style: TextStyle(
              color: Colors.black, fontSize: 24, fontFamily: 'SukumvitSetBold'),
        ),
      ],
    ),

    actions: <Widget>[
      IconButton(
        icon: Icon(
          (IconData(
            0xe908,
            fontFamily: 'wishlistPost',
          )),
          color: HexColor("7225FF"),
          size: 20,
        ),
        iconSize: 30.0,
        onPressed: () => print('Save post'),
      ),
      InkWell(
        onTap: () {},
        child: Container(
          padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(18.0),
          ),
          child: Text(
            "Edit",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      SizedBox(
        height: 5,
        width: 5,
      ),
    ],

    iconTheme: IconThemeData(
      color: Colors.black,
    ),

    // leading: Icon(Icons.menu),
    centerTitle: true,
    backgroundColor: Colors.white,
    elevation: 0.0,
  );
}

【问题讨论】：

只需用SizedBox 包裹那个按钮并给它固定高度
至少添加你的代码@imdsk
@VirajD 好的兄弟：>
@Ruchit lemme 试试这个，谢谢兄弟

标签： flutter dart responsive-design flutter-appbar

【解决方案1】：

一个想法是在不使用 AppBar() 的情况下自定义一切。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Row(
          children: [
            Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
            const SizedBox(width: 10),
            Icon(Icons.message, color: Colors.black),
            const SizedBox(width: 10),
            TextButton(
              style: TextButton.styleFrom(
                backgroundColor: Colors.purple,
                shape: RoundedRectangleBorder(
                  borderRadius:  BorderRadius.circular(999),
                ),
              ),
              child: Text('Edit', style: TextStyle(color: Colors.white))
            ),
          ],
        ),
        height: kToolbarHeight,
        decoration: const BoxDecoration(color: Colors.white, boxShadow: [
          BoxShadow(
            offset: Offset(0.0, 2),
            blurRadius: 14,
            spreadRadius: 2,
          )
        ]),
      ),
    ));
  }
}

【讨论】：

哇，谢谢你的好主意：>