时间戳

首页 > 解决方案 > Flutter BottomSheet 更改宽度

flutter - Flutter BottomSheet 更改宽度

问题描述

我希望底页看起来像Angular Material 中的那个。
在此处输入图像描述 片材反而扩展至最大宽度。问题是我无法配置底页的宽度。目前看起来像这样在此处输入图像描述

我的代码如下所示：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ...,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          tooltip: 'Add File',
          onPressed: () => showModalBottomSheet(
            context: context,
            builder: (context) => AddFileBottomSheet(),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
            ),
            // backgroundColor: Colors.transparent,
            isScrollControlled: true,
          ),
        ),
      ),
    );
  }
}

class AddFileBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 5),
            alignment: Alignment.center,
            child: Text(
              'Create New File',
              style: Theme.of(context).textTheme.headline5,
            ),
          ),
          GridView.count(
            shrinkWrap: true,
            crossAxisCount: 3,
            children: [
              _gridTile(
                context: context,
                icon: Icon(Icons.file_upload),
                text: 'Upload File',
                callback: () => print('lel'),
              ),
              _gridTile(
                context: context,
                icon: Icon(Icons.create),
                text: 'Create Text File',
                callback: () => print('lel'),
              ),
            ],
          ),
        ],
    );
  }

  Widget _gridTile({
    @required BuildContext context,
    @required Icon icon,
    @required String text,
    @required void callback(),
  }) {
    return InkWell(
        onTap: () => callback(),
        child: Container(
          padding: EdgeInsets.all(15),
          alignment: Alignment.center,
          height: double.infinity,
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              icon,
              Text(text, style: Theme.of(context).textTheme.subtitle2),
            ],
          ),
        ),
    );
  }
}

我知道我可以在使其中一些透明时假装它具有较小的宽度，但是我有圆形边缘并且它们不会被保留。

解决方法 #1

我设法通过将 更改canvasColor为透明并使小部件中的边框变圆来做到这一点： 在此处输入图像描述 这样，但是当用户单击假透明区域时，我需要执行额外的逻辑以将其关闭。

首先canvasColor以某种方式将其添加到上下文中：

...
      floatingActionButton: Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
        child: Builder(
          builder: (context) => FloatingActionButton(
            child: Icon(Icons.add),
            tooltip: 'Add File',
            onPressed: () => showModalBottomSheet(
              context: context,
              builder: (context) => AddFileBottomSheet(),
              // shape: RoundedRectangleBorder(
              //   borderRadius: BorderRadius.only(
              //     topLeft: Radius.circular(10),
              //     topRight: Radius.circular(10),
              //   ),
              // ),
              // backgroundColor: Colors.transparent,
              isScrollControlled: true,
            ),
          ),
        ),
      ),
...

然后伪造宽度

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 300),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
          ),
        ),
        // backgroundColor: Colors.transparent,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 5),
              alignment: Alignment.center,
              child: Text(
                'Create New File',
                style: Theme.of(context).textTheme.headline5,
              ),
            ),
            GridView.count(
              shrinkWrap: true,
              crossAxisCount: 3,
              children: [
                _gridTile(
                  context: context,
                  icon: Icon(Icons.file_upload),
                  text: 'Upload File',
                  callback: () => print('lel'),
                ),
                _gridTile(
                  context: context,
                  icon: Icon(Icons.create),
                  text: 'Create Text File',
                  callback: () => print('lel'),
                ),
              ],
            ),
          ],
        ),
      ),
    );

我想知道是否有一个标准的方法来解决这个问题，我需要你的帮助。我尝试制作一个 DartPad 示例，但它给了我Script error.

我的想法是尝试通过以下方式使其对移动设备友好：

    final isMobile = MediaQuery.of(context).size.width < 700;
    return Container(
      padding: EdgeInsets.symmetric(horizontal: isMobile ? 0: 300),
      child: ...
    )

这将使其在移动时为全宽，在桌面时具有一些填充。

标签： flutterflutter-layoutbottom-sheetflutter-showmodalbottomsheet

解决方案

更新 ：Flutter 现在支持 showModalBottomSheet 中的约束属性

showModalBottomSheet(
  context: context,
  constraints: BoxConstraints(
     maxWidth: Responsive.isMobile(context) ? Get.width : 600,              
  ),
  builder: ...
),

推荐阅读