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

【问题标题】：Custom Rounded appbar in flutter颤振中的自定义圆形应用栏
【发布时间】：2020-07-24 19:01:31
【问题描述】：

自定义应用栏截图：

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

【问题讨论】：

【解决方案1】：

我认为它不是圆角的appBar，而是圆角的container。

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

import 'package:flutter/material.dart';

class TempMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      home: Scaffold(
        backgroundColor: Colors.indigo.shade800,
        appBar: AppBar(
          title: Text(
            'Test App',
          ),
          elevation: 0,
          backgroundColor: Colors.indigo.shade800,
        ),
        body: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(60),
              topRight: Radius.circular(60),
            ),
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案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"))
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：