Flutter 如何制作像这样的应用栏

发布于08月13日

appBar: AppBar(
title: Center(
child: SvgPicture.asset("assets/images/logo.svg",
height: 15, width: 15, color: Colors.white,),
),
backgroundColor: const Color.fromRGBO(91, 189, 146, 1),
),

如何在appbar底部添加如图所示的Wave？

推荐答案

下面的方法将会起到作用.它使用CustomPaint小工具在中间绘制半圆，并使用Transform.translate将"图标"向下移动一点.

这就是结果(也请勾选live demo on the DartPad)

这minimal-reproducible-example个源代码

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 60,
        flexibleSpace: const CustomPaint(
          painter: MyCustomPainter(),
          size: Size.infinite,
        ),
        title: Center(
          child: Transform.translate(
            offset: const Offset(0, 5),
            child: const Center(
              child: Text(
                "Q",
                style: TextStyle(color: Colors.white, fontSize: 30),
              ),
            ),
          ),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
    );
  }
}

class MyCustomPainter extends CustomPainter {
  const MyCustomPainter({Listenable? repaint}) : super(repaint: repaint);

  static const circleSize = 90.0;
  static const gap = 15.0;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..style = PaintingStyle.fill
      ..color = const Color.fromRGBO(91, 189, 146, 1);

    var shadow = Paint()
      ..style = PaintingStyle.fill
      ..color = const Color.fromARGB(255, 127, 127, 127)
      ..maskFilter = MaskFilter.blur(
        BlurStyle.normal,
        Shadow.convertRadiusToSigma(5),
      );

    var path = Path();
    path.lineTo(0, size.height - gap);
    path.lineTo(size.width / 2, size.height - gap);
    path.arcTo(
      Rect.fromLTWH(
        size.width / 2 - circleSize / 2,
        size.height - circleSize,
        circleSize,
        circleSize,
      ),
      pi,
      -pi,
      false,
    );
    path.lineTo(size.width / 2, size.height - gap);
    path.lineTo(size.width, size.height - gap);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, shadow);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return false;
  }
}