您好，我如何根据图像在颤动中创建弯曲形状的应用栏？

Question

返回强文本脚手架(

应用栏：应用栏（ 领导：墨水井（ 孩子：SvgPicture.asset（ '资产/arrow.svg', ), 点按：（）{ Navigator.pop(上下文); }, ));

Answer 1

class MyHomePage extends StatelessWidget {

  final double topWidgetHeight = 200.0;
  final double avatarRadius = 50.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Column(
            children: <Widget>[
              new Container(
                height: topWidgetHeight,
                color: Colors.yellow,
              ),
              new Container(
                color: Colors.red,
              )
            ],
          ),
          new Positioned(
            child: new CircleAvatar(
              radius: avatarRadius,
              backgroundColor: Colors.green,
            ),
            left: (MediaQuery.of(context).size.width/2) - avatarRadius,
            top: topWidgetHeight - avatarRadius,
          )
        ],
      ),
    );
  }
}

Answer 2

试试下面的代码。

 import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[800],
        title: Padding(
          padding: EdgeInsets.only(top: 80.0),
          child: CircleAvatar(
            backgroundColor: Colors.white,
            // backgroundImage: AssetImage(''),
            radius: 60,
            child: Padding(
              padding: EdgeInsets.only(bottom: 50.0),
              child: Text(
                'Logo Here',
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 18.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

注意：更改应用栏的背景颜色以满足您的需要