如何在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 構建了類似的東西，以獲得 header 可以具有 maxExtent 和 minExtent 的彎曲效果。 不滾動時，header 高度將顯示曲線，否則當您開始滾動時，它也會縮小到設定的高度。

您可以在 2:50 左右查看本教程，了解如何實現 header，然后相應地設計您的后台容器。

Answer 3

如上面的回答。 它不是程序欄的一部分。 這是我的做法。

創建一個 class 如下：

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

然后通過將它堆疊在 body 小部件上來在屏幕中使用它。

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