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

Question

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

但我不明白如何把这个按钮放到 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,
  );
}

标签： flutterdartresponsive-designflutter-appbar

Answer 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,
          )
        ]),
      ),
    ));
  }
}