A action bottom sheet that adapts to the platform (Android/iOS).

Overview

Adaptive action sheet

pub package

A action bottom sheet that adapts to the platform (Android/iOS).

iOS Android
n1 n2

Getting Started

Add the package to your pubspec.yaml:

adaptive_action_sheet: ^2.0.0

In your dart file, import the library:

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
);

Parameters:

showAdaptiveActionSheet:

  • actions: The Actions list that will appear on the ActionSheet. (required)
  • cancelAction: The optional cancel button that show under the actions (grouped separately on iOS).
  • title: The optional title widget that show above the actions.
  • androidBorderRadius: The android border radius (default: 30).
  • The optional backgroundColor and barrierColor can be passed in to customize the appearance and behavior of persistent material bottom sheets(Android only).

BottomSheetAction:

  • title: The primary content of the action sheet item. (required)
  • onPressed: The callback that is called when the action item is tapped. (required)
  • leading: A widget to display before the title. Typically an Icon widget. (optional)
  • trailing: A widget to display after the title. Typically an Icon or a CircleAvatar widget. (optional)

CancelAction:

  • title: The primary content of the cancel action sheet item. (required)
  • onPressed: The callback that is called when the action item is tapped. onPressed is optional by default will dismiss the Action Sheet.
Comments
  • Minimal support for browser

    Minimal support for browser

    Not having browser support lower this pacage sore.

    I am not sure what layout would I expect for action bottom sheet.

    Maybe small action sheet from the bottom center that does not take all the page width if it is bigger than x.

    Screenshot_20210114-125332_Firefox

    opened by guyluz11 3
  • Add context to action, so we have the right context if we need it

    Add context to action, so we have the right context if we need it

    To close the action sheet we need the right context to make sure we are using the right one with the Navigator. Otherwise we can pop the wrong route.

    opened by wer-mathurin 2
  • Null_safety incompatibility

    Null_safety incompatibility

    Hi,

    since i upgraded to Null_safety other plugins like websocket_channel need higher versions:

    So, because app depends on both adaptive_action_sheet ^1.1.0 and web_socket_channel ^2.0.0, version solving failed.
    
    Because no versions of web_socket_channel match >2.0.0 <3.0.0 and web_socket_channel 2.0.0 depends on crypto ^3.0.0, web_socket_channel ^2.0.0 requires crypto ^3.0.0.
    And because adaptive_action_sheet >=1.0.10 depends on universal_io ^1.0.2 which depends on crypto ^2.1.5, web_socket_channel ^2.0.0 is incompatible with adaptive_action_sheet >=1.0.10.
    

    best regards harald

    opened by s3ppo 2
  • Automatically dismiss BottomSheetAction

    Automatically dismiss BottomSheetAction

    Hi, thank you for your awesome package!

    I have a question. I want to implement automatically dismiss BottomSheetAction when tapping BottomSheetAction. (like CancelAction) Can I implement do that using this package?

    question 
    opened by sakatech-jp 2
  • Add support to title for both Android and iOS

    Add support to title for both Android and iOS

    I added a new optional title parameter to let people pass a Widget that will be displayed as title in the action sheet.

    It is a widget rather than a String to give total freedom to customize the title based on the specific needs (this follows the implementation of the CupertinoActionSheet.

    Example of how this will be used can be found in the example app.

    opened by lucaspal 2
  • Add isDismissible property to set isDismissible / barrierDismissible in the respective implementations

    Add isDismissible property to set isDismissible / barrierDismissible in the respective implementations

    This PR adds a new bool property isDismissible to the showAdaptiveActionSheet with a default value of true. This is used to set isDismissible and barrierDismissible on the respective implementations, both also have a default value of true. In addition to the property a WillPopScope was added in the builder of showModalBottomSheet, blocking physical back button to dismiss the dialog if isDissmissible == true

    opened by danielSafeNow 1
  • Add option to customize colors via bottomSheetColor and barrierColor.

    Add option to customize colors via bottomSheetColor and barrierColor.

    The following PR adds some customization options. This can also be handy if the user wants to override the values set from the theme.

    • Add option to customize colors via bottomSheetColor and barrierColor.
    • Update example showcasing the new option.
    opened by lucaspal 1
  • V2.0.2

    V2.0.2

    In this version:

    • Add context to 'onPressed' for BottomSheetAction.
      showAdaptiveActionSheet(
        context: context,
        title: const Text('Title'),
        actions: <BottomSheetAction>[
        BottomSheetAction(title: const Text('Item 1'), onPressed: (context) {}),
        BottomSheetAction(title: const Text('Item 2'), onPressed: (context) {}),
        BottomSheetAction(title: const Text('Item 3'), onPressed: (context) {}),
        ],
        cancelAction: CancelAction(title: const Text('Cancel')),// onPressed parameter is optional by default will dismiss the ActionSheet
      );
      
    opened by Daniel-Ioannou 0
  • 2.0.1

    2.0.1

    In this version:

    • Add isDismissible parameter that specifies whether the bottom sheet will be dismissed when user taps outside of the bottom sheet.
      showAdaptiveActionSheet(
        context: context,
        isDismissible: false,
        actions: <BottomSheetAction>[
          BottomSheetAction(
            title: const Text('Item 1'),
            onPressed: () {},
          ),
          BottomSheetAction(
            title: const Text('Item 2'),
            onPressed: () {},
          ),  
        ],
        cancelAction: CancelAction(title: 'Cancel'),
      );
      
    opened by Daniel-Ioannou 0
  • V1.1.0

    V1.1.0

    In this version:

    Breaking change:

    • Change title type from String to Widget
    Version 1.1.0 or later Version 1.0.12 or earlier
      BottomSheetAction(
        title: const Text(
          'Title',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
        onPressed: () {},
        leading: const Icon(Icons.add, size: 25),
      ),
    
     BottomSheetAction(
       title: 'Title',
       textStyle: TextStyle(
         fontSize: 18,
         fontWeight: FontWeight.w500,
       ),
       onPressed: () {},
       leading: const Icon(Icons.add, size: 25),
     ),
    
    opened by Daniel-Ioannou 0
  • V1.0.11

    V1.0.11

    In this version:

    • Add options for leading and trailing widget
    • Add options for text align
      showAdaptiveActionSheet(
        context: context,
        actions: <BottomSheetAction>[
          BottomSheetAction(
            title: 'Add',
            onPressed: () {},
            leading: const Icon(
              Icons.add,
              size: 25,
            ),
            trailing: const Icon(
              Icons.delete,
              size: 25,
              color: Colors.red,
            ),
            textAlign: TextAlign.start,
          ),        
        ],
        cancelAction: CancelAction(title: 'Cancel'),
      );
      
    opened by Daniel-Ioannou 0
  • fix: Wrap the content of _showMaterialBottomSheet with a SafeArea

    fix: Wrap the content of _showMaterialBottomSheet with a SafeArea

    Wrap the root widget of the builder of _showMaterialBottomSheet in a SafeArea widget (like in CupertinoActionSheet) in order to fix cropped action sheet bottom on some devices when it's not iOS platform.

    opened by ArthurMaroulier 0
Releases(2.0.2)
  • 2.0.2(Jul 17, 2022)

    In this version:

    • Add context to 'onPressed' for BottomSheetAction.
      showAdaptiveActionSheet(
        context: context,
        title: const Text('Title'),
        actions: <BottomSheetAction>[
        BottomSheetAction(title: const Text('Item 1'), onPressed: (context) {}),
        BottomSheetAction(title: const Text('Item 2'), onPressed: (context) {}),
        BottomSheetAction(title: const Text('Item 3'), onPressed: (context) {}),
        ],
        cancelAction: CancelAction(title: const Text('Cancel')),// onPressed parameter is optional by default will dismiss the ActionSheet
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Mar 8, 2021)

  • v1.1.0(Feb 22, 2021)

    In this version:

    Breaking change:

    • Change title type from String to Widget
    Version 1.1.0 or later Version 1.0.12 or earlier
      BottomSheetAction(
        title: const Text(
          'Title',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
        onPressed: () {},
        leading: const Icon(Icons.add, size: 25),
      ),
    
     BottomSheetAction(
       title: 'Title',
       textStyle: TextStyle(
         fontSize: 18,
         fontWeight: FontWeight.w500,
       ),
       onPressed: () {},
       leading: const Icon(Icons.add, size: 25),
     ),
    
    Source code(tar.gz)
    Source code(zip)
  • v1.0.12(Feb 10, 2021)

  • v1.0.11(Jan 20, 2021)

    In this version:

    • Add options for leading and trailing widget
    • Add options for text align
      showAdaptiveActionSheet(
        context: context,
        actions: <BottomSheetAction>[
          BottomSheetAction(
            title: 'Add',
            onPressed: () {},
            leading: const Icon(
              Icons.add,
              size: 25,
            ),
            trailing: const Icon(
              Icons.delete,
              size: 25,
              color: Colors.red,
            ),
            textAlign: TextAlign.start,
          ),        
        ],
        cancelAction: CancelAction(title: 'Cancel'),
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v1.0.10(Jan 17, 2021)

  • v1.0.9(Dec 16, 2020)

    In this version:

    • [Android] Fix default material background color.
    • [Android] Fix the padding on the top if title not set.
    • [iOS] Use showCupertinoModalPopup instead of showModalBottomSheet
    Source code(tar.gz)
    Source code(zip)
  • v1.0.8(Nov 18, 2020)

  • v1.0.7(Nov 16, 2020)

    In this version:

    • Add optional textStyle parameter for each action.
      showAdaptiveActionSheet(
         context: context,
         actions: <BottomSheetAction>[
            BottomSheetAction(
               title: 'Item 1', 
               onPressed: () {}, 
               textStyle: const TextStyle(
                  fontSize: 25,
                  color: Colors.blueAccent,
               ),
            ),
            BottomSheetAction(title: 'Item 2', onPressed: () {}),
         ],
         cancelAction: CancelAction(// onPressed parameter is optional by default will dismiss the ActionSheet
            title: 'Cancel', 
            textStyle: const TextStyle(
               fontSize: 25,
               color: Colors.blueAccent,
            ),
         ),
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v1.0.6(Oct 29, 2020)

    In this version:

    • Add optional title parameter and will be displayed as title in the action sheet.
      showAdaptiveActionSheet(
         context: context,
         title: const Text('Title'),
         actions: <BottomSheetAction>[
            BottomSheetAction(title: 'Item 1', onPressed: () {}),
            BottomSheetAction(title: 'Item 2', onPressed: () {}),
         ],
         cancelAction: CancelAction(title: 'Cancel'),// onPressed parameter is optional by default will dismiss the ActionSheet
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v1.0.5(Oct 29, 2020)

  • v1.0.4(Oct 29, 2020)

  • v1.0.3(Jun 5, 2020)

  • v1.0.2(May 25, 2020)

  • v1.0.1(May 25, 2020)

  • v1.0.0(May 19, 2020)

A plugin that adapts the flutter application to different platforms

A plugin that adapts the flutter application to different platforms, allowing your flutter application to flexibly and efficiently adapt to various platforms in the same flutter project, maximizing UI multiplexing, and sharing business logic code across different platforms.

shuaiwang 30 Dec 31, 2021
Flutter: Rating bottom sheet

Rating bottom sheet Features Getting started pubspec.yaml rating: <lastest version> Usage Implement the RatingController class PrintRatingController e

David Araujo 3 Aug 18, 2022
Show beautiful bottom sheet as confirmation dialog quickly and easily.

sweetsheet Show beautiful bottom sheet as confirmation dialog quickly and easily. nice warning success danger and since version 0.2.0 , it is fully cu

Ayao Corneille ALLOGBALO 80 Sep 27, 2022
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Aleyna Eser 2 Oct 25, 2022
Flutter modern bottom navbar. Compatible with Android & iOS. You can customize it freely.

ss_bottom_navbar Flutter modern bottom nav bar. Compatible with Android & iOS. You can customize it freely. Getting Started dependencies: ss_bottom_

null 6 Sep 18, 2022
A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

Language: English |中文简体 flutter_swipe_action_cell A package that can give you a cell that can be swiped ,effect is like iOS native If you like this pa

WenJingRui 261 Jan 7, 2023
GitHub Action that uses the Dart Package Analyzer to compute the Pub score of Dart/Flutter packages

Dart/Flutter package analyzer This action uses the pana (Package ANAlysis) package to compute the score that your Dart or Flutter package will have on

Axel Ogereau-Peltier 45 Dec 29, 2022
Master Channel cannot use Glass Floating Action Button

Problem Master Channel cannot use GlassFloatingActionButton. About This package

null 7 Oct 2, 2022
Floating Action Button Widget For Flutter

Flutter Tutorial - FloatingActionButton Widget (FAB) Embed the FloatingActionBut

Behruz Hurramov 0 Dec 27, 2021
A Contextual action bar workaround for flutter

Flutter contextual action bar(CAB) CAB & Flutter CAB is a top app bar that replace the application app bar to provide contextual actions to selected i

null 17 Sep 16, 2022
A Flutter package to create a nice circular menu using a Floating Action Button.

FAB Circular Menu A Flutter package to create a nice circular menu using a Floating Action Button. Inspired by Mayur Kshirsagar's great FAB Microinter

Mariano Cordoba 198 Jan 5, 2023
Icarus - Local Action, Global Impact

Icarus Local Action, Global Impact Download · Report Bug · Request Feature Table of Contents About The Project About Icarus Todo Technologies Getting

Yunus Emre Alpu 9 Oct 26, 2022
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

floating_bottom_bar This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and

MindInventory 11 Oct 10, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Adam Jonsson 364 Dec 6, 2022
WooCommerce App template that uses Flutter. Integrated to work with WooCommerce stores, connect and create an IOS and Android app from Flutter for IOS and Android

WooCommerce App: Label StoreMax Label StoreMax - v5.3.1 Official WooSignal WooCommerce App About Label StoreMax Label StoreMax is an App Template for

WooSignal 314 Jan 9, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023