Inscription – sword tianya, start from your drip accumulation, and will keep improving, that is, toss every day.

Important message

  • Netease Cloud [Play big front End] supporting courses

  • EDU tutorial

  • Drip accumulation series of articles on Flutter development

The sample a

1. When the drawer is closed, click the label and the drawer will open up. This function can also be configured to close. 2, when the drawer is closed, slide up, slide over a certain height automatically slide up to open, when there is no slide over a certain height, automatically slide down, is closed; 3, the drawer open state, when the sliding view at the top, slide down, drawer slide down automatically closed, configurable shape whether to open the function, the drawer open state, when the drawer slide down, no sliding to a certain distance, the drawer slide back to open up automatically, when sliding to a certain distance, Drawer will automatically slide down to the closed state; 5, when the drawer is closed, gently sweep the drawer upward, the drawer will slide up to open state, when the drawer is open, gently sweep down, the drawer will slide down to closed state.

1 Adding a Dependency

To achieve the drawer effect, the technical content involves the following:

3. View movement of Transform 4. Transition of AnimationController 5. NotificationListener Listens to process of sliding component 6. DragController the controller’s custom listening callback implements A calling B

The editor has wrapped the effect into a DragContainer component, using the drag_container dependency library. The editor has wrapped the effect into a dependency library for you to use.

The actual project starts with a reference dependency, which is added through the pub repository as follows: see here for the latest version

  dependencies:
	drag_container: ^1.01.Copy the code

Alternatively, you can add a dependency via Github with the following code:

dependencies:
	drag_container:
	      git:
	        url: https://github.com/zhaolongs/drag_container.git
	        ref: master
Copy the code

Then load the dependency as follows:

flutter pub get
Copy the code

Then guide the package where it is used, with the following code:

import 'package:drag_container/drag_container.dart';
Copy the code

Then you can use the DragContainer drawer layout.

2 DragContainer Drawer view basic use

The effect shown above is that the drawer view floats on top of the main view, so consider using a cascading layout for the main content of the page, with the following code:

/// pull up drawer effect
class BottomDragWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    returnBottomDragWidgetState(); }}class BottomDragWidgetState extends State {

  /// Slide controller
  ScrollController scrollController = new ScrollController();
  /// the drawer controller
  DragController dragController = new DragController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer effect"),
      ),
      backgroundColor: Colors.grey,
      /// The body of the page uses a cascading layout
      body: Stack(
        children: <Widget>[

          / / /... . Other views on the page
          /// Drawer viewbuildDragWidget(), ], ), ); }... . Omit}Copy the code

Here we also declare a ScrollController created for the slide view in the drawer view. The declared drawer controller DragController controls the opening and closing of drawers as follows:

  /// close the drawer
 dragController.close();
  /// Open the drawer
 dragController.open();
Copy the code

The buildDragWidget method is the one used to create the DragContainer drawer component,

  /// build bottom aligned drawer effect view
  Widget buildDragWidget(a){
    /// Align the bottom in the cascading layout
    return Align(
      alignment: Alignment.bottomCenter,
      child: DragContainer(
        /// The drawer closes with a default height of 0.4
        initChildRate: 0.1./// The drawer opens with a default height of 0.4
        maxChildRate: 0.4./// whether to display the default title
        isShowHeader: true./// Background color
        backGroundColor: Colors.white,
        /// Background fillet size
        cornerRadius: 12./// Automatically slide up or slide down the threshold
        maxOffsetDistance:1.5./// the drawer controller
        controller: dragController,
        /// Slide controller
        scrollController: scrollController,
        /// Automatic sliding time
        duration: Duration(milliseconds: 800),
        /// The drawer's child Widget
        dragWidget: buildListView(),
        /// click event callback for drawer title
        dragCallBack: (isOpen){ },
      ),
    );
  }

Copy the code

BuildListView = ListView = ListView = ListView = ListView = ListView = ListView = ListView = ListView = ListView = ListView

  Here is a list of listViews
  buildListView() {
    return ListView.builder(
      /// The controller of the list is associated with the drawer view
      controller: scrollController,
      /// The controller needs to be used
      /// the controller in the builder callback
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
            onTap: () {
              print("Click on event $index");
              /// close the drawer
              dragController.close();
            },
            child: ListTile(title: Text('Test data $index'))); }); }Copy the code

The running effect is as follows: