Flutter: как настроить с помощью пышного ящика

Question

введите описание изображения здесь

Я пытаюсь настроить ящик с определенным изогнутым стилем, возможно ли это?

Если да, есть ли пример?

Answer 1

Flutter предлагает большую гибкость в создании пользовательских интерфейсов, вы можете комбинировать различные виджеты, чтобы получить желаемый результат.

Я сделал демонстрацию того, чего вы пытаетесь достичь. Я добавил код и вывод (как изображение)

class SO extends StatelessWidget {

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      // bottom padding 
      endDrawer: Padding(
        padding: const EdgeInsets.only(bottom: 80),
        child: ClipRRect(
          // give it your desired border radius
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(250),
          ),
          // wrap with a sizedbox for a custom width [for more flexibility]
          child: SizedBox(
            width: 200,
            child: Drawer(
              // your widgets goes here
              child: ...,
            ),
          ),
        ),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: SizedBox(
            height: 50,
            child: FlatButton(
              color: Colors.blue,
              // open the drawer
              onPressed: () {
                _scaffoldKey.currentState.openEndDrawer();
              },
              child: Center(
                child: Text('Open Drawer'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

ВЫХОД:

введите описание изображения здесь

Answer 2

Если вы проверите код ящика, вы увидите, что это только ConstraindedBox с Material (и семантика), так что, возможно, вы можете скопировать тот же код и внести некоторые незначительные изменения в форму Материала.

class MyDrawer extends StatelessWidget {
  /// Creates a material design drawer.
  ///
  /// Typically used in the [Scaffold.drawer] property.
  ///
  /// The [elevation] must be non-negative.
  const MyDrawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
    this.isEndDrawer = false
  }) : assert(elevation != null && elevation >= 0.0),
        super(key: key);
 
  /// Added so the shape changes left or right depending the position of the drawer
  final bool isEndDrawer;

  /// The z-coordinate at which to place this drawer relative to its parent.
  ///
  /// This controls the size of the shadow below the drawer.
  ///
  /// Defaults to 16, the appropriate elevation for drawers. The value is
  /// always non-negative.
  final double elevation;

  /// The widget below this widget in the tree.
  ///
  /// Typically a [SliverList].
  ///
  /// {@macro flutter.widgets.child}
  final Widget child;

  /// The semantic label of the dialog used by accessibility frameworks to
  /// announce screen transitions when the drawer is opened and closed.
  ///
  /// If this label is not provided, it will default to
  /// [MaterialLocalizations.drawerLabel].
  ///
  /// See also:
  ///
  ///  * [SemanticsConfiguration.namesRoute], for a description of how this
  ///    value is used.
  final String semanticLabel;

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    String label = semanticLabel;
    switch (Theme.of(context).platform) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        label = semanticLabel;
        break;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        label = semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;
    }
    return Semantics(
      scopesRoute: true,
      namesRoute: true,
      explicitChildNodes: true,
      label: label,
      child: Align(
        alignment: isEndDrawer ? Alignment.topRight : Alignment.topLeft,
        child: FractionallySizedBox(
          heightFactor: 0.95,
          child: ConstrainedBox(
            constraints: const BoxConstraints.expand(width: 304.0), //304 is the kWidth of the Drawer
            child: Material(
              elevation: elevation,
              child: child,
              shape: RoundedRectangleBorder( //Add this ShapeBorder to the Material
                borderRadius: isEndDrawer ?
                  BorderRadius.only(bottomLeft: Radius.circular(220))
                  : BorderRadius.only(bottomRight: Radius.circular(220)),
                side: BorderSide.none
              ),
            ),
          )
        )
      ),
    );
  }
}

И в Scaffold используйте его как обычный ящик

Scaffold(
  endDrawer: MyDrawer(
    isEndDrawer: true,
    child: ... your child widget
  ),
  drawer: MyDrawer(
    child: ... your child widget
  ),
)

Если вы сравните коды, я просто добавил isEndDrawer, Align, FractionallySizedBox и форму к Material

введите описание изображения здесь