Blog

In this article we will explore some cool and easy to use bottomsheet widget examples, and see how to integrate them in our apps via step by step examples.

Example 1: Flutter BottomSheet with Adaptive ActionSheet

This example utilizes the flutter_adaptive_action_sheet package.

flutter_adaptive_action_sheet is an action bottom sheet that adapts to the platform (Android/iOS).

For example here is it in Android

and here is it in iOS:

Step 1: Create Project

Start by creating a flutter project.

Step 2: Dependencies

Install it by declaring it as a dependency:

adaptive_action_sheet: ^2.0.0

Step 3: Create Action Sheet

Start by importing:

import 'package:adaptive_action_sheet/adaptive_action_sheet.dart';

Instead of using a showModalBottomSheet use showAdaptiveActionSheet Widget:

showAdaptiveActionSheet(
 context: context,
 title: const Text('Title'),
 androidBorderRadius: 30,
 actions: <BottomSheetAction>[
    BottomSheetAction(title: const Text('Item 1'), onPressed: () {}),
    BottomSheetAction(title: const Text('Item 2'), onPressed: () {}),
    BottomSheetAction(title: const Text('Item 3'), onPressed: () {}),
 ],
 cancelAction: CancelAction(title: const Text('Cancel')),// onPressed parameter is optional by default will dismiss the ActionSheet
);

Full Example

Here is a full example

Step 1: Create Project

Create a flutter project or download the one provided.

Step 2: Install Library

Install the library as has been discussed.

Step 3: Write Code

Replace your main.dart with the following code:

main.dart

import 'package:adaptive_action_sheet/adaptive_action_sheet.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive action sheet Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Adaptive action sheet example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                showAdaptiveActionSheet(
                  context: context,
                  actions: <BottomSheetAction>[
                    BottomSheetAction(
                      title: const Text('Item 1'),
                      onPressed: () {},
                    ),
                    BottomSheetAction(
                      title: const Text('Item 2'),
                      onPressed: () {},
                    ),
                    BottomSheetAction(
                      title: const Text('Item 3'),
                      onPressed: () {},
                    ),
                  ],
                  cancelAction: CancelAction(title: const Text('Cancel')),
                );
              },
              child: const Text('Show action sheet'),
            ),
            ElevatedButton(
              onPressed: () {
                showAdaptiveActionSheet(
                  context: context,
                  title: const Text('This is the title'),
                  actions: <BottomSheetAction>[
                    BottomSheetAction(
                      title: const Text('Item 1'),
                      onPressed: () {},
                    ),
                    BottomSheetAction(
                      title: const Text('Item 2'),
                      onPressed: () {},
                    ),
                    BottomSheetAction(
                      title: const Text('Item 3'),
                      onPressed: () {},
                    ),
                  ],
                  cancelAction: CancelAction(title: const Text('Cancel')),
                );
              },
              child: const Text('Show action sheet with title'),
            ),
            ElevatedButton(
              onPressed: () {
                showAdaptiveActionSheet(
                  context: context,
                  actions: <BottomSheetAction>[
                    BottomSheetAction(
                      title: const Text(
                        'Add',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      onPressed: () {},
                      leading: const Icon(Icons.add, size: 25),
                    ),
                    BottomSheetAction(
                      title: const Text(
                        'Delete',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500,
                          color: Colors.red,
                        ),
                      ),
                      onPressed: () {},
                      leading: const Icon(
                        Icons.delete,
                        size: 25,
                        color: Colors.red,
                      ),
                    ),
                  ],
                  cancelAction: CancelAction(title: const Text('Cancel')),
                );
              },
              child: const Text('Show action sheet with icons'),
            ),
          ],
        ),
      ),
    );
  }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Read more
3.	Follow code author