Стандартный нижний лист во флаттере

Question

Мне очень трудно реализовать «Стандартный нижний лист» в моем приложении - под этим я подразумеваю нижний лист, где «заголовок» виден и перетаскиваем (ссылка: https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet). Еще больше: я не могунайдите любой пример этого где-нибудь: S. Закрытие, которое я пришел к желаемому результату, заключается в реализации DraggableScrollableSheet как bottomSheet : в Скаффолд (только у этого виджета есть initialChildSize ), но кажется, что нет никакого способа сделать заголовок "липким", потому что все содержимое прокручиваемо: /.

Я также нашел это: https://flutterdoc.com/bottom-sheets-in-flutter-ec05c90453e7 - швы как тамчасть о "Persistent Bottom Sheet" - это та, которую я ищу, но художественная часть не детализирована, поэтому я не могу точно определить, как ее реализовать, плюс комментарии там довольно негативные, так что я думаю, что это не совсем правильно ...

Есть ли у кого-нибудь решение?: S

Answer 1

Если вы ищете постоянную нижнюю таблицу, пожалуйста, обратитесь к исходному коду по ссылке ниже

Постоянный нижний лист

Вы можете обратиться к _showBottomSheet () для вашего требования, и некоторые изменения будут соответствовать вашему требованию

Answer 2

Поскольку @Sergio назвал несколько хороших альтернатив, ему все еще нужно было больше кодирования, чтобы заставить его работать, как и должно быть, с тем, что я нашел Slifding_up_panel , так что для всех, кто ищет решение, вы можете найти его здесь .

Тем не менее я нахожу очень странным, что встроенный виджет bottomSheet во Flutter не предоставляет опций для создания «стандартного нижнего листа», упомянутого в material.io: S

Answer 3

Вы можете сделать это, используя стек и анимацию:

class HelloWorldPage extends StatefulWidget {
  @override
  _HelloWorldPageState createState() => _HelloWorldPageState();
}

class _HelloWorldPageState extends State<HelloWorldPage>
    with SingleTickerProviderStateMixin {
  final double minSize = 80;
  final double maxSize = 350;

  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500))
          ..addListener(() {
            setState(() {});
          });

    _animation =
        Tween<double>(begin: minSize, end: maxSize).animate(_controller);

    super.initState();
  }

  AnimationController _controller;
  Animation<double> _animation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Positioned(
            bottom: 0,
            height: _animation.value,
            child: GestureDetector(
              onDoubleTap: () => _onEvent(),
              onVerticalDragEnd: (event) => _onEvent(),
              child: Container(
                color: Colors.red,
                width: MediaQuery.of(context).size.width,
                height: minSize,
              ),
            ),
          ),
        ],
      ),
    );
  }

  _onEvent() {
    if (_controller.isCompleted) {
      _controller.reverse(from: maxSize);
    } else {
      _controller.forward();
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}