如何使弯曲的底部appbar在颤音中？

Question

如何在我的应用程序中绘制自定义形状，以使图像看起来像图像？

我认为这不是

appBar

Answer 1

我认为是绿色的the以下是圆角的白色容器。

这里是一个例子：

appBar

I与CustomScrollview和SliverPersistenHeader构建了类似的东西，以获得弯曲效果，您的标头可以具有Maxextent和Minextent。当不滚动时，标题高度将显示曲线，否则，当您开始滚动时，它也会缩小到设定的高度。

您可以从2:50左右检查一下此tutorial

，以了解如何实现标头，然后相应地设计您的背景容器。

上面答案。从编程上讲，它不是Appbar的一部分。这就是我的做法。

Answer 2

创建一个类： appBar

Answer 3

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

我同意尝试在Appbar本身上执行此操作的其他答案并不是最直接的。这是我设法完成效果的方式：

import 'dart:ui';

import 'package:flutter/material.dart';

class AppBarPainter extends CustomPainter {

@override
void paint(Canvas canvas, Size size) {
    Paint paint_1 = Paint()
      ..color = const Color(0xffF57752)
      ..style = PaintingStyle.fill;

    Path path_1 = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width * .08, 0.0)
      ..cubicTo(
          size.width * 0.04, 0.0, //x1,y1
          0.0, 0.04, //x2,y2
          0.0, 0.1 * size.width //x3,y3
          );

    Path path_2 = Path()
      ..moveTo(size.width, 0)
      ..lineTo(size.width * .92, 0.0)
      ..cubicTo(
          size.width * .96, 0.0, //x1,y1
          size.width, 0.96, //x2,y2
          size.width, 0.1 * size.width //x3,y3
          );

    Paint paint_2 = Paint()
      ..color = const Color(0xffF57752)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    Path path_3 = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0);

    canvas.drawPath(path_1, paint_1);
    canvas.drawPath(path_2, paint_1);
    canvas.drawPath(path_3, paint_2);
  }

基本上，我使用两个容器使Appbar向下弯曲的外观。通过与顶级容器和Appbar的背景颜色匹配，您无法说出它实际上是您在第二级容器的圆角显示的空间中看到的容器。然后，它就像将第二级容器的角落四舍五入，并使其背景颜色成为您真正想要的身体的颜色。然后，您只是对待它的孩子，就好像是身体的开始。

要注意的另一个重要的事情是，滚动的任何东西都会夹在顶部的圆角之外。真正解决这个问题的方法有两种：

使用

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 80.0,
        backgroundColor: const Color(0xffF57752),
        elevation: 0.0,
        title: const Text('Title'),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.white,
            child: Text('     text here'),
          ),
          CustomPaint(
            painter: AppBarPainter(),
            child: Container(height: 0),
          ),
        ],
      ),
    );
  }

添加到二级容器的顶部的一些填充物。此方法不会影响性能，但是看起来不太好，因为内容将在容器内的设定点上夹住，而不是在其边缘。

Answer 4

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xff565992), // Match this colour to your top Container
        title: Text('Title'),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Color(0xff565992), // Match this colour to your appBar
        ),
        child: Container(
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: Color(0xfffbf8ff), // This is the colour you want your body to be
            borderRadius: BorderRadius.only(topLeft: Radius.circular(30), topRight: Radius.circular(30)),
          ),
          child: <Widgets> // Start building your body from here as you would normally
        )
      )
    );
  }

。如果您使用了一吨，这可能会在理论上影响性能，但是我从未见过明显的影响。