Flutter 颤振：AppBar形状（工具栏和AppBar具有不同背景的圆角顶角）

我需要实现这样的目标：

我试着使用边界半径

    Widget build(BuildContext context) {
  final _appBar = AppBar(
    elevation: 6.0,
    shape: ContinuousRectangleBorder(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(90.0),
      ),),
    title: Text(listPagesNames[_cIndex]),
  );

但它更改了工具栏级别的左上角。即使我将半径设置为90.0，也不会太大

我想，也许我可以改变尺寸。 因为我可以使用服务包更改工具栏的背景色：

导入“包：flifter/services.dart”

但使用大小，ApBar仍然在同一位置“启动”

我想可能是偏移量的问题，因为我已经可以更改工具栏的颜色，但我不确定如何设置appBar以及是否可能。 我是dart新手，所以任何想法都会很有帮助：

像这样的想法

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.red,
  ));
  runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: AppBar().preferredSize,
        child: SafeArea(
          child: Container(
            color: Colors.red,
            child: AppBar(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25.0),
                  topRight: Radius.circular(25.0)
                )
              ),
              elevation: 8,
              backgroundColor: Colors.white,
              leading: Icon(Icons.menu, color: Colors.black,),
            ),
          ),
        ),
      ),
      body: Container(color: Colors.white,),
    );
  }
}

像这样的东西

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.red,
  ));
  runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: AppBar().preferredSize,
        child: SafeArea(
          child: Container(
            color: Colors.red,
            child: AppBar(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25.0),
                  topRight: Radius.circular(25.0)
                )
              ),
              elevation: 8,
              backgroundColor: Colors.white,
              leading: Icon(Icons.menu, color: Colors.black,),
            ),
          ),
        ),
      ),
      body: Container(color: Colors.white,),
    );
  }
}

---

@Hlas答案能否解决我的问题：

如果任何人需要使用可点击的引导图标，例如抽屉开启器，请记住将图标包装在图标按钮小部件中，并将其放入另一个构建器中，就像下面的代码一样；代码基于威尔的答案

appBar: PreferredSize(
    preferredSize: AppBar().preferredSize,
    child: SafeArea(
      child: Container(
        color: Colors.red,
        child: AppBar(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25.0),
              topRight: Radius.circular(25.0),
            ),
          ),
          elevation: 8,
          backgroundColor: Colors.white,
          leading: Builder(
            builder: (context) => IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip:
                  MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
          title: Text('Text on AppBar',
            style: TextStyle(color: Colors.black),
          ),
        ),

---

@Hlas答案能否解决我的问题：

如果任何人需要使用可点击的引导图标，例如抽屉开启器，请记住将图标包装在图标按钮小部件中，并将其放入另一个构建器中，就像下面的代码一样；代码基于威尔的答案

appBar: PreferredSize(
    preferredSize: AppBar().preferredSize,
    child: SafeArea(
      child: Container(
        color: Colors.red,
        child: AppBar(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25.0),
              topRight: Radius.circular(25.0),
            ),
          ),
          elevation: 8,
          backgroundColor: Colors.white,
          leading: Builder(
            builder: (context) => IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip:
                  MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
          title: Text('Text on AppBar',
            style: TextStyle(color: Colors.black),
          ),
        ),

---

是的，在这些小部件中包装AppBar具有魔力：PreferredSize->SafeArea->Container->AppBar是的，在这些小部件中包装AppBar具有魔力：PreferredSize->SafeArea->Container->AppBar