web-dev-qa-db-ja.com

Flutterで下の色のボーダーを持つAppBarを作成する方法は？

下の境界線と、標高を使用して行うことができる影の濃淡がある、このようなアプリバーを作成したいと思います。誰かがこれを達成するためのサンプルコードスニペットを提供できますか

AppBar with Border

dartflutterappbar
7
Keshav Aditya R.P

たぶんこのようなもの

AppBar(bottom: PreferredSize(child: Container(color: Colors.orange, height: 4.0,), preferredSize: Size.fromHeight(4.0)),)
2
Andrey Turkovsky

真にカスタマイズ可能なデザインが必要な場合は、理想的には独自のappbarを作成する必要があります。例：

class MyAppbar extends StatelessWidget implements PreferredSizeWidget {
  final Widget title;

  const MyAppbar({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 26.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(10.0),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.deepOrange,
              width: 3.0,
              style: BorderStyle.solid,
            ),
          ),
        ),
        child: title,
      ),
    );
  }

  final Size preferredSize = const Size.fromHeight(kToolbarHeight);
}
1
Rémi Rousselet