Question

自定义应用栏的屏幕截图：

我想像照片一样制作一个自定义应用栏有人可以帮助我创建我搜索过很多但在任何地方都找不到的

Answer 1

我认为它不是圆形的appBar，而是下面的圆形container。

我在backgroundColor中添加了Scaffold，它与AppBar的背景色匹配。另外，我将elevation的{{1}}设置为0以防止阴影。

AppBar

Answer 2

诀窍是不弯曲应用栏，而是弯曲底部容器。看看下面的代码，您将了解它。

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final key = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF012B44),
      key: key,
      appBar: AppBar(
        title: Text("OTP Verification"),
        backgroundColor: Colors.transparent,
      ),
      body: SingleChildScrollView(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15),
              topRight: Radius.circular(15),
            )
          ),
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "Welcome to the login page",
                style: Theme.of(context).textTheme.display1,
              ),
              TextField(
                decoration: InputDecoration(hintText: "Name"),
              ),
              FlatButton(
                  onPressed: () {
                    key.currentState.showSnackBar(SnackBar(
                      content:
                          Text("I won't say your name but stay home, stay safe!"),
                    ));
                  },
                  child: Text("Say my name"))
            ],
          ),
        ),
      ),
    );
  }
}

颤振中的自定义圆形应用栏

2 个答案: