如何在Flutter中制作弯曲的底部appBar？

Question

如何在应用程序中为appBar绘制自定义形状以使其看起来像图像？

Answer 1

我认为它不是appBar的形状。

我认为是带有圆角的绿色appBar下的白色容器。

这里是例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
                top: 60.0, left: 30.0, right: 30.0, bottom: 30.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Hello',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 50.0,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 20.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

我用CustomScrollView和SliverPersistenHeader构建了类似的东西，以获得弯曲的效果，您的标题可以具有maxExtent和minExtent。不滚动时，页眉高度将显示曲线，否则，当您开始滚动时，其高度也会缩小到设置的高度。

您可以从2:50左右开始查看此tutorial，以了解如何实现标头，然后相应地设计背景容器。