RonakCN

Drawer

In ProgressDark modeRTL

A bottom sheet drawer that slides up from the bottom.

7:21
Settings
Profile settings
Notifications
Privacy & security
Help & support
Sign out

Installation

Copy the component into your project using the CLI:

$ronakcn add drawer

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart
import 'package:flutter/material.dart';
import '../components/drawer/drawer.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnDrawer Example')),
      body: Center(
        child: RcnDrawer(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Drawer ships with the following variants:

default

A bottom sheet drawer.

7:21
Settings
Profile settings
Notifications
Privacy & security
Help & support
Sign out

from-right

Drawer sliding from the right.

7:21
Settings
Profile settings
Notifications
Privacy & security
Help & support
Sign out

fullscreen

A full-screen drawer.

7:21
Settings
Profile settings
Notifications
Privacy & security
Help & support
Sign out

Props

PropTypeDefaultDescription
child*Widget—Content inside the drawer.
isOpenboolfalseWhether the drawer is open.
onCloseVoidCallback?nullCalled when the drawer closes.
sideDrawerSideDrawerSide.bottomSide from which the drawer slides in.

Source files

lib/components/ui/drawer.dart
import 'package:flutter/material.dart';

enum DrawerSide { bottom, right, left }

class RcnDrawer extends StatelessWidget {
  const RcnDrawer({super.key, required this.child, this.isOpen = false, this.onClose, this.side = DrawerSide.bottom});
  final Widget child;
  final bool isOpen;
  final VoidCallback? onClose;
  final DrawerSide side;

  static Future<void> show(BuildContext context, {required Widget child, DrawerSide side = DrawerSide.bottom}) {
    return showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
      builder: (_) => child,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
      ),
      child: Column(mainAxisSize: MainAxisSize.min, children: [
        Container(width: 40, height: 4, margin: const EdgeInsets.only(bottom: 20),
          decoration: BoxDecoration(color: Theme.of(context).colorScheme.outline.withOpacity(0.3), borderRadius: BorderRadius.circular(9999))),
        child,
      ]),
    );
  }
}
Version 0.1.0 · feedback category