alex-melnyk / flutter_advanced_drawer

https://pub.dev/packages/flutter_advanced_drawer
https://pub.dev/packages/flutter_advanced_drawer
BSD 3-Clause "New" or "Revised" License
71 stars 23 forks source link

Disabled gestures on drawer widgets #31

Closed jihchao closed 2 years ago

jihchao commented 2 years ago

Conflicts occur when you enable the gesture and need to slide the drawer list. Add the disabledGesturesOnDrawer option. If disabledGesturesOnDrawer is true, gestures on drawer widgets are disabled and gestures on widgets outside the drawer are still available.

alex-melnyk commented 2 years ago

If I'm understand right you are trying to disable drag gesture, there is already defined property disabledGestures

jihchao commented 2 years ago

I want to use gestures , but I don't want to use gestures in the drawer area because I need the ListTile in the drawer to slide left and right. for example(Slidable widget is flutter_slidable plugin): gif demo https://lickscreen.com/img/flutter_drawer_demo.gif

  @override
  Widget build(BuildContext context) {
    return AdvancedDrawer(
      // disabledGestures: true,
      disabledGesturesOnDrawer: true,
      controller: _advancedDrawerController,
      openRatio: 0.80,
      openScale: 1,
      animationCurve: Curves.linear,
      animateChildDecoration: false,
      backdropColor: Colors.blueGrey,
      drawer: _buildDrawer(),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('demo'),
        ),
        body: Container(
          child: Text('main screen.'),
        ),
      ),
    );
  }

Widget _buildDrawer() {
    return SafeArea(
        child: Padding(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: [
          Slidable(
            key: const ValueKey(0),
            endActionPane: ActionPane(
              motion: DrawerMotion(),
              children: [
                SlidableAction(
                  onPressed: (c) {
                    print('delete drawer list item.');
                  },
                  backgroundColor: Color(0xFF0392CF),
                  foregroundColor: Colors.white,
                  icon: Icons.delete,
                  label: 'Delete',
                ),
              ],
            ),
            child: ListTile(
              title: Text('is demo'),
              selectedTileColor: Colors.blueGrey[400],
              selected: true,
              selectedColor: Colors.white,
              onTap: () {
                print('drawer list item clicked.');
              },
            ),
          ),
        ],
      ),
    ));
  }
alex-melnyk commented 2 years ago

I done example with the library you are using and it works with an existing property, check this out:

Code snipped ```dart import 'package:flutter/material.dart'; import 'package:flutter_advanced_drawer/flutter_advanced_drawer.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State { final _advancedDrawerController = AdvancedDrawerController(); @override void initState() { super.initState(); _advancedDrawerController.showDrawer(); } @override Widget build(BuildContext context) { return AdvancedDrawer( backdropColor: Colors.blueGrey, controller: _advancedDrawerController, animationCurve: Curves.easeInOut, animationDuration: const Duration(milliseconds: 300), animateChildDecoration: true, rtlOpening: false, // openScale: 1.0, disabledGestures: true, childDecoration: const BoxDecoration( // NOTICE: Uncomment if you want to add shadow behind the page. // Keep in mind that it may cause animation jerks. // boxShadow: [ // BoxShadow( // color: Colors.black12, // blurRadius: 0.0, // ), // ], borderRadius: const BorderRadius.all(Radius.circular(16)), ), child: Scaffold( appBar: AppBar( title: const Text('Advanced Drawer Example'), leading: IconButton( onPressed: _handleMenuButtonPressed, icon: ValueListenableBuilder( valueListenable: _advancedDrawerController, builder: (_, value, __) { return AnimatedSwitcher( duration: Duration(milliseconds: 250), child: Icon( value.visible ? Icons.clear : Icons.menu, key: ValueKey(value.visible), ), ); }, ), ), ), body: Container(), ), drawer: SafeArea( child: Container( child: ListTileTheme( textColor: Colors.white, iconColor: Colors.white, child: Column( mainAxisSize: MainAxisSize.max, children: [ Container( width: 128.0, height: 128.0, margin: const EdgeInsets.only( top: 24.0, bottom: 64.0, ), clipBehavior: Clip.antiAlias, decoration: BoxDecoration( color: Colors.black26, shape: BoxShape.circle, ), child: Image.asset( 'assets/images/flutter_logo.png', ), ), Slidable( // Specify a key if the Slidable is dismissible. key: const ValueKey(0), // The start action pane is the one at the left or the top side. startActionPane: ActionPane( // A motion is a widget used to control how the pane animates. motion: const ScrollMotion(), // A pane can dismiss the Slidable. dismissible: DismissiblePane(onDismissed: () {}), // All actions are defined in the children parameter. children: [ // A SlidableAction can have an icon and/or a label. SlidableAction( onPressed: (_) {}, backgroundColor: Color(0xFFFE4A49), foregroundColor: Colors.white, icon: Icons.delete, label: 'Delete', ), SlidableAction( onPressed: (_) {}, backgroundColor: Color(0xFF21B7CA), foregroundColor: Colors.white, icon: Icons.share, label: 'Share', ), ], ), // The end action pane is the one at the right or the bottom side. endActionPane: ActionPane( motion: ScrollMotion(), children: [ SlidableAction( // An action can be bigger than the others. flex: 2, onPressed: (_) {}, backgroundColor: Color(0xFF7BC043), foregroundColor: Colors.white, icon: Icons.archive, label: 'Archive', ), SlidableAction( onPressed: (_) {}, backgroundColor: Color(0xFF0392CF), foregroundColor: Colors.white, icon: Icons.save, label: 'Save', ), ], ), // The child of the Slidable is what the user sees when the // component is not dragged. child: const ListTile(title: Text('Slide me')), ), ListTile( onTap: () {}, leading: Icon(Icons.home), title: Text('Home'), ), ListTile( onTap: () {}, leading: Icon(Icons.account_circle_rounded), title: Text('Profile'), ), ListTile( onTap: () {}, leading: Icon(Icons.favorite), title: Text('Favourites'), ), ListTile( onTap: () {}, leading: Icon(Icons.settings), title: Text('Settings'), ), Spacer(), DefaultTextStyle( style: TextStyle( fontSize: 12, color: Colors.white54, ), child: Container( margin: const EdgeInsets.symmetric( vertical: 16.0, ), child: Text('Terms of Service | Privacy Policy'), ), ), ], ), ), ), ), ); } void _handleMenuButtonPressed() { // NOTICE: Manage Advanced Drawer state through the Controller. // _advancedDrawerController.value = AdvancedDrawerValue.visible(); _advancedDrawerController.showDrawer(); } } ```
image
jihchao commented 2 years ago

Thank you for your reply. You're right.