rounded_modal

A custom implementation of showModalBottomSheet.

Instead of overriding the entire theme of the app (which caused problems in various parts of my app) as suggested by other solutions on "How to set rounded corners of a modal?", I decided to take a look at the implementation for showModalBottomSheet and find the problem myself.

Getting Started

Turns out that all that was needed was wrapping the main code for the modal in a Theme widget that contains the canvasColor: Colors.transparent trick. I also made it easier to customize the radius and the background color of the modal itself.

import 'package:rounded_modal/rounded_modal.dart';

showRoundedModalBottomSheet(
   context: context,
   radius: 10.0,  // This is the default
   color: Colors.white,  // Also default
   builder: (context) => ???,
);

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Libraries

rounded_modal

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]