Как разместить линейный индикатор в нижней части панели приложения?

Question

Как расположить линейный индикатор выполнения в нижней части панели приложения, не используя свойство bottom панели приложения и не увеличивая высоту панели приложения?

, как показано на следующем рисунке: Панель дизайна материала

Answer 1

Ответ Чемамолинов правильный, но я чувствую, что LinearProgressIndicator немного толще, чем должно быть.Моя версия:

AppBar(
  title: Text("Title"),
  bottom: _AppBarProgressIndicator()
);

Класс:

const double _kAppBarProgressIndicatorHeight = 4.0;

class _AppBarProgressIndicator extends SizedBox implements PreferredSizeWidget {
  AppBarProgressIndicator({ Key key }) : super(
    key: key,
    height: _kAppBarProgressIndicatorHeight,
    child: LinearProgressIndicator()
  );

  @override
  Size get preferredSize => Size(
    double.infinity,
    _kAppBarProgressIndicatorHeight
  );
}

С Оптимизация Адиля Садика Еще лучше:

AppBar(
  title: Text("Title"),
  bottom: _createProgressIndicator()
);

Метод:

PreferredSize _createProgressIndicator() => PreferredSize(
  preferredSize: Size(double.infinity, 4.0),
  child: SizedBox(
    height: 4.0,
    child: LinearProgressIndicator()
  )
);

Answer 2

Почему вы не хотите использовать свойство bottom?Это та ловушка, которую предоставляет виджет Flutter AppBar, чтобы добавлять туда вещи.В противном случае вам придется создать собственную версию AppBar.

. Если вам это нужно, я создал приведенный ниже фрагмент, который вы можете использовать в своей панели приложений следующим образом.

  appBar: new AppBar(
    title: new Text("Title"),
    backgroundColor: Colors.orange,
    bottom: MyLinearProgressIndicator(
      backgroundColor: Colors.orange,
    ),
  ),

MyLinearProgressIndicator должен реализовывать preferredSize геттер.Вот почему вам нужно создать свою собственную версию.

// Cant't use _kLinearProgressIndicatorHeight 'cause it is private in the
// progress_indicator.dart file
const double _kMyLinearProgressIndicatorHeight = 6.0;

class MyLinearProgressIndicator extends LinearProgressIndicator
    implements PreferredSizeWidget {
  MyLinearProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
  }) : super(
          key: key,
          value: value,
          backgroundColor: backgroundColor,
          valueColor: valueColor,
        ) {
    preferredSize = Size(double.infinity, _kMyLinearProgressIndicatorHeight);
  }

  @override
  Size preferredSize;
}

И вот результат:

Answer 3

Ответ

@ chemamolins совершенно верен, но может быть проще просто обернуть ваш виджет в виджет Предпочитаемый размер .Виджет принимает child и preferredSize типа Size Вот пример из приложения, над которым я работаю, оборачивая StreamBuilder:

return Scaffold(
  appBar: AppBar(
    bottom: PreferredSize(
              preferredSize: Size(double.infinity, 1.0),
              child: ProgressBar(widget.bloc.isLoading),
    ),

---snip---

class ProgressBar extends StatelessWidget {
  final Stream<bool> _isLoading;
  ProgressBar(this._isLoading);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _isLoading,
      builder: (context, snapshot) {
        if (snapshot.hasData && snapshot.data) {
          return LinearProgressIndicator();
        }
        else {
          return Container();
        }
      }
    );
  }
}

Answer 4

Просто используйте LinearProgressIndicator() как первый виджет внутри column.Тогда вы получите индикатор прогресса ниже Appbar

return Scaffold(
appbar: Appbar(
title: Text('App Bar'),),
body: Column(
children: <widget> [
linearProgressIndicator(),
Text('Hi'),]
),
)