flutter_inner_drawer 使用

版本：

　　flutter_inner_drawer: "^0.2.2"

github:  https://github.com/Dn-a/flutter_inner_drawer

這個比較簡單，直接上code，或者在github上面看就ok了

story.dart

 

import 'package:flutter/material.dart';

import 'story_data.dart';
import 'story_item.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart';

void main() => runApp(Story());

class Story extends StatefulWidget {
  @override
  _Story createState() => new _Story();
}

class _Story extends State<Story> {
  bool isLoading = false; //是否正在請求新數據
  bool showMore = false; //是否顯示底部加載中提示
  bool offState = false; //是否顯示進入頁面時的圓形進度條
  int page = 0;
  ScrollController scrollController = ScrollController();
  final GlobalKey<InnerDrawerState> _innerDrawerKey =
      GlobalKey<InnerDrawerState>();
  Future<void> getMoreData() async {
    print('xx');
    if (isLoading) {
      return;
    }
    setState(() {
      isLoading = true;
      page = 0;
    });
    print('下拉刷新開始,page = $page');

    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        isLoading = false;
        final arr = new StoryData(
            26,
            'images/story/03/cover.jpg',
            'episode.26',
            '放課後',
            '終於能夠和本身憧憬的同窗天然的說早安。正當爽子正在爲這件事感動的時候,這學期代理班導的副班導荒井一市(通稱:阿瓶)登場了,阿瓶正想要擅自決定誰來製做出席簿時,不想看到你們困擾的爽子就舉起了手…。',
            []);
        storyData.add(arr);
        print('下拉刷新結束,page = $page');
      });
    });
  }

  void getListData() {}

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        print('滑動到了最底部${scrollController.position.pixels}');
        setState(() {
          showMore = true;
        });
        getMoreData();  // 增長點數據
      }
    });
    getListData();   // 暫時未使用
  }

  @override
  void dispose() {
    super.dispose();
    //手動中止滑動監聽
    scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return InnerDrawer(
        key: _innerDrawerKey,
        position: InnerDrawerPosition.start, // 滑動方向
        onTapClose: true, // default false 點擊關閉
        swipe: true, // default true  
        offset: 0.6, // default 0.4
        colorTransition: Colors.yellow, // default Color.black54  轉變顏色
        animationType: InnerDrawerAnimation.linear, // default static static / linear / quadratic
        innerDrawerCallback: (a) => print(a), // return bool 
        child: Material(
            child: SafeArea(
                child: Container(
          alignment: Alignment.topLeft,
          decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/bg/flower_one.jpg'),
                fit: BoxFit.cover,
              ),
              border: new Border(
                right: BorderSide(color: Colors.pink, width: 0.5),
                bottom: BorderSide(color: Colors.pink, width: 0.5),
              )),
          child: new Column(
            children: <Widget>[
              new Container(
                  margin: const EdgeInsets.only(top: 100.0),
                  color: Colors.green,
                  child: new Row(
                    children: <Widget>[
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      )
                    ],
                  )),
              new Container(
                  margin: const EdgeInsets.only(top: 40.0),
                  color: Colors.green,
                  child: new Row(
                    children: <Widget>[
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      )
                    ],
                  )),
              new Container(
                  margin: const EdgeInsets.only(top: 40.0),
                  color: Colors.green,
                  child: new Row(
                    children: <Widget>[
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      )
                    ],
                  )),
              new Container(
                  margin: const EdgeInsets.only(top: 40.0),
                  color: Colors.green,
                  child: new Row(
                    children: <Widget>[
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      ),
                      Expanded(
                        child: Icon(Icons.adb, color: Colors.red),
                        flex: 1,
                      )
                    ],
                  ))
            ],
          ),
        ))),
        //  A Scaffold is generally used but you are free to use other widgets
        // Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
        scaffold: Scaffold(
            body: new RefreshIndicator(
                child: isLoading == false
                    ? new ListView.builder(
                        controller: scrollController,
                        itemCount: storyData.length, //列表長度+底部加載中提示
                        itemBuilder: (BuildContext context, int index) {
                          // 傳入MessageData返回列表項
                          return new StoryItem(storyData[index]);
                        },
                      )
                    : new Stack(
                        children: <Widget>[
                          new Padding(
                            padding:
                                new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
                            child: new Center(
                              child: SpinKitFadingCircle(
                                color: Colors.blueAccent,
                                size: 30.0,
                              ),
                            ),
                          ),
                          new Padding(
                            padding:
                                new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
                            child: new Center(
                              child: new Text('正在加載中，莫着急哦~'),
                            ),
                          ),
                        ],
                      ),
                onRefresh: _onRefresh)));
  }

  Future<void> _onRefresh() async {
    if (isLoading) {
      return;
    }
    setState(() {
      isLoading = true;
      page = 0;
    });

    print('下拉刷新開始,page = $page');

    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        isLoading = false;
        final arr = new StoryData(
            26,
            'images/story/03/cover.jpg',
            'episode.26',
            '放課後',
            '終於能夠和本身憧憬的同窗天然的說早安。正當爽子正在爲這件事感動的時候,這學期代理班導的副班導荒井一市(通稱:阿瓶)登場了,阿瓶正想要擅自決定誰來製做出席簿時,不想看到你們困擾的爽子就舉起了手…。',
            []);
        storyData.add(arr);
        print('下拉刷新結束,page = $page');
      });
    });
  }

  void _open() {
    _innerDrawerKey.currentState.open();
  }

  void _close() {
    _innerDrawerKey.currentState.close();
  }
}

 

效果圖：

---------------------拖動--------------------->

  源碼地址：https://github.com/ft1107949255/kiminitodoke