android - Flutter AppBar标题与动画进度条重叠

Question

我正在尝试制作一个带有两行标题并在其下方有动画进度条的AppBar，如下所示:

我想使主标题与导航箭头对齐，因此我在标题上使用了填充，但动画进度栏与文本重叠:

有什么办法可以解决？
sign_video.dart *

Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        // if (snapshot.connectionState == ConnectionState.done && isReady) {
        return Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            iconTheme: IconThemeData(
              color: Colors.black, //change your color here
            ),
            backgroundColor: Colors.white,
            elevation: 0,
            title: Padding(
              padding: const EdgeInsets.only(
                top: 30.0,
                bottom: 30.0,
              ),
              child: SafeArea(
                child: RichText(
                  text: TextSpan(
                      text: vidlist[currentIndexPosition].category,
                      style: kTitleTextStyle.copyWith(fontSize: 21),
                      children: [
                        TextSpan(text: "\n"),
                        TextSpan(
                          text: '${vidlist.length.toString()} words',
                          style: TextStyle(
                            fontSize: 18.0,
                            color: Color(0xFF505050),
                          ),
                        ),
                      ]),
                ),
              ),
            ),
            bottom: AnimatedProgressBar(
                height: 10.0,
                value: (currentIndexPosition + 1) / vidlist.length),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(top: 27.0),
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Color(0xFFF1F3F6),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                  ),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 15.0,
                      ),
                      Text(
                        vidlist[currentIndexPosition].signName,
                        style: TextStyle(
                          fontSize: 50,
                          color: Color(0xFF505050),
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                      SizedBox(
                        height: 30.0,
                      ),
                      snapshot.connectionState == ConnectionState.done &&
                              isReady
                          ? Padding(
                              padding: const EdgeInsets.only(
                                  top: 8.0, left: 16.0, right: 16.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: AspectRatio(
                                  aspectRatio: _controller.value.aspectRatio,
                                  // Use the VideoPlayer widget to display the video.
                                  child: VideoPlayer(_controller),
                                ),
                              ),
                            )
                          : Container(
                              height: 221.0,
                              width: 221.0,
                              child: CircularProgressIndicator(),
                            ),
                      SizedBox(
                        height: 125.0,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          RawMaterialButton(
                            onPressed: () {
                              setState(() {
                                if (currentIndexPosition <= 0) {
                                  currentIndexPosition = vidlist.length - 1;
                                } else {
                                  currentIndexPosition--;
                                }
                                _startPlay();
                              });
                            },
                            elevation: 5.0,
                            fillColor: Colors.white,
                            child: Icon(
                              FontAwesomeIcons.chevronLeft,
                              size: 25.0,
                            ),
                            padding: EdgeInsets.all(20.0),
                            shape: CircleBorder(),
                          ),
                          // RawMaterialButton(
                          //   onPressed: () {
                          //     Navigator.push(
                          //       context,
                          //       MaterialPageRoute(
                          //         builder: (context) => SignChecker(
                          //           category:
                          //               vidlist[currentIndexPosition].category,
                          //           sign:
                          //               vidlist[currentIndexPosition].signName,
                          //         ),
                          //       ),
                          //     );
                          //   },
                          //   elevation: 5.0,
                          //   fillColor: kDarkBlueColor,
                          //   child: Icon(
                          //     FontAwesomeIcons.camera,
                          //     size: 25.0,
                          //     color: Colors.white,
                          //   ),
                          //   padding: EdgeInsets.all(20.0),
                          //   shape: CircleBorder(),
                          // ),
                          RawMaterialButton(
                            onPressed: () {
                              setState(() {
                                if (currentIndexPosition <= 0) {
                                  currentIndexPosition = vidlist.length - 1;
                                } else {
                                  currentIndexPosition--;
                                }
                                _startPlay();
                              });
                            },
                            elevation: 5.0,
                            fillColor: Colors.white,
                            child: Icon(
                              FontAwesomeIcons.chevronRight,
                              size: 25.0,
                            ),
                            padding: EdgeInsets.all(20.0),
                            shape: CircleBorder(),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

progress_bar.dart

import 'package:flutter/material.dart';

class AnimatedProgressBar extends StatefulWidget
    implements PreferredSizeWidget {
  final double value;
  final double height;
  @override
  Size preferredSize;
  // AnimatedProgressBar({@required this.value, this.height = 12});

  AnimatedProgressBar({this.height, this.value});

  @override
  _AnimatedProgressBarState createState() => _AnimatedProgressBarState();
}

class _AnimatedProgressBarState extends State<AnimatedProgressBar> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints box) {
        // using padding will cut the progress bar
        // -145 to make the bar align with the appBar title
        widget.preferredSize =
            Size.fromWidth(box.maxWidth * _floor(widget.value - 145));
        return Container(
          width: box.maxWidth - 145,
          child: Stack(
            children: [
              Container(
                height: widget.height,
                decoration: BoxDecoration(
                  color: Color(0XFFF1F3F6),
                  borderRadius: BorderRadius.all(
                    Radius.circular(widget.height),
                  ),
                ),
              ),
              AnimatedContainer(
                duration: Duration(milliseconds: 800),
                curve: Curves.easeOutCubic,
                height: widget.height,
                width: (box.maxWidth - 145) * _floor(widget.value),
                decoration: BoxDecoration(
                  color: Color(0xFF0132C7),
                  borderRadius: BorderRadius.all(
                    Radius.circular(widget.height),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  _floor(double value, [min = 0.0]) {
    return value.sign <= min ? min : value;
  }
}

Answer 1

我认为这是重叠的，因为AppBar的空间有限。在AppBar中给一个自定义高度希望它能工作。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your title',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(100.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}