首页 文章

抽屉没有动画的动画

提问于
浏览 次
1

所以我使用widget Stack 创建自己的抽屉，以便它出现在内容的顶部 . 我想这个抽屉和widget Scaffold 抽屉（默认）有相同的动画，所以我把动画放在这个抽屉上但是当我点击菜单图标时动画不起作用 . 所以这是我的代码 .

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rencana_belanja/ui/common/gradient_app_bar.dart';
import 'package:rencana_belanja/ui/home/home_screen_body.dart';

class HomeScreen extends StatefulWidget {
@override
  State createState() {
    // TODO: implement createState
    return new HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{

bool isShow = false;
AnimationController _showingDrawerAnimation;
Animation<Size> _theDrawer;

@override
  void initState() {
    // TODO: implement initState
    super.initState();
  _showingDrawerAnimation = new AnimationController(
    vsync: this,
    duration: new Duration(milliseconds: 300)
  );
  _theDrawer = new SizeTween(
    begin: new Size.fromWidth(0.0),
    end: new Size.fromWidth(280.0)
  ).animate(new CurvedAnimation(
    parent: _showingDrawerAnimation,
    curve: Curves.ease
  ));
}

@override
  Widget build(BuildContext context) {

  Widget drawer = new Stack(
    children: <Widget>[
      new InkWell(
        child: new Container(
          color: Colors.black54
        ),
        onTap: () async {
          if (_showingDrawerAnimation.isCompleted) {
            await _showingDrawerAnimation.reverse();
            setState(() {
              isShow = false;
            });
          }
        },
      ),
      new AnimatedBuilder(
        animation: _theDrawer,
        builder: (BuildContext context, Widget child) {
          return new PreferredSize(
            preferredSize: _theDrawer.value,
            child: new SizedBox(
              width: _theDrawer.value.width,
              child: new Container(
                decoration: new BoxDecoration(
                  boxShadow: [
                    new BoxShadow(
                      color: Colors.black45,
                      blurRadius: 7.0
                    )
                  ],
                  gradient: new LinearGradient(
                    colors: [
                      const Color(0xFF02AAB0),
                      const Color(0xFF00CDAC)
                    ],
                    begin: const FractionalOffset(0.0, 0.7),
                    end: const FractionalOffset(0.6, 0.3),
                    stops: [0.0, 1.0],
                    tileMode: TileMode.clamp
                  )
                ),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    _showingDrawerAnimation.isAnimating ? new Container() : new Stack(
                      children: <Widget>[
                        new Image(
                          image: new AssetImage(
                            'assets/img/bokeh.jpg',
                          ),
                        ),
                        new Positioned(
                          bottom: 10.0,
                          left: 5.0,
                          child: new Text(
                            'Rencanakan kebutuhan belanjamu!',
                              style: new TextStyle(
                                color: Colors.white,
                                fontFamily: 'Ubuntu',
                                fontWeight: FontWeight.w500,
                                fontSize: 15.0,
                              )
                          ),
                        )
                      ],
                    ),
                    _showingDrawerAnimation.isAnimating ? new Container() : new Container(
                      margin: const EdgeInsets.only(top: 12.0, bottom: 180.0),
                      padding: const EdgeInsets.symmetric(horizontal: 18.0),
                      child: new Column(
                        children: <Widget>[
                          new Row(
                            children: <Widget>[
                              new Icon(Icons.delete, color: Colors.white,),
                              new Container(width: 20.0,),
                              new Text('Tong Sampah', style: new TextStyle(
                                color: Colors.white,
                                fontFamily: 'Ubuntu',
                                fontWeight: FontWeight.w500,
                                fontSize: 16.0,
                              ),)
                            ],
                          ),
                          new Divider(color: Colors.white,),
                          new Row(
                            children: <Widget>[
                              new Icon(Icons.help_outline, color: Colors.white,),
                              new Container(width: 20.0,),
                              new Text('Petunjuk Penggunaan', style: new TextStyle(
                                color: Colors.white,
                                fontFamily: 'Ubuntu',
                                fontWeight: FontWeight.w500,
                                fontSize: 16.0,
                              ),)
                            ],
                          ),
                          new Divider(color: Colors.white,),
                          new Row(
                            children: <Widget>[
                              new Icon(Icons.person, color: Colors.white,),
                              new Container(width: 20.0,),
                              new Text('Hubungi Author', style: new TextStyle(
                                color: Colors.white,
                                fontFamily: 'Ubuntu',
                                fontWeight: FontWeight.w500,
                                fontSize: 16.0,
                              ),)
                            ],
                          ),
                          new Divider(color: Colors.white,),
                        ],
                      ),
                    ),
                    _showingDrawerAnimation.isAnimating ? new Container() : new Row(
                      children: <Widget>[
                        new Container(
                          width: 10.0,
                        ),
                        new Text(
                        'Personalization',
                          style: new TextStyle(
                            color: Colors.white,
                            fontFamily: 'Ubuntu',
                            fontWeight: FontWeight.w500,
                            fontSize: 14.0,
                          )
                        ),
                      ],
                    ),
                    _showingDrawerAnimation.isAnimating ? new Container() : new Divider(color: Colors.white,),
                    _showingDrawerAnimation.isAnimating ? new Container() : new Row(
                      children: <Widget>[
                        new Container(margin: const EdgeInsets.only(left: 15.0)),
                        new Icon(Icons.settings, color: Colors.white,),
                        new Container(width: 20.0,),
                        new Text('Pengaturan', style: new TextStyle(
                          color: Colors.white,
                          fontFamily: 'Ubuntu',
                          fontWeight: FontWeight.w500,
                          fontSize: 16.0,
                        ),)
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      )
    ],
  );
  // TODO: implement build
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Column(
          children: <Widget>[
            new GradientAppBar(
              title: 'Daftar Belanja',
              isShow: isShow,
              onDrawerShows: (bool value) async {
                if (_showingDrawerAnimation.isDismissed) {
                  await _showingDrawerAnimation.forward();
                  setState(() {
                    isShow = true;
                  });
                }
              },
            ),
            new HomeScreenBody()
          ],
        ),
        new Positioned(
          bottom: 20.0,
          right: 15.0,
          child: new GestureDetector(
            onTap: () => print("tiesto"),
              child: new CircleAvatar(
                backgroundColor: Colors.red, 
                child: new Icon(
                  Icons.add, 
                  color: Colors.white,
                ),
                radius: 25.0,
              ),
          )
        ),
        isShow == true ? drawer : new Text(''),
      ],
    ),
  );
}
}

唯一有效的动画只有 reverse 一个 . 我怎样才能使 forward 动画工作？

note: sorry for bad english, it's not my first language so i hope you understand. Thank you

dart flutter

1 回答

  • 1

    您可以使用单独的Class来容纳整个抽屉 . 我希望你在寻找那个 .

    import 'dart:async';
  import 'package:flutter/material.dart';
  import 'dart:math' as math;

  void main() {
    runApp(MyApp());
  }


  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: "List View",
        home: new HomePage(),
      );
    }
  }

  String text = "hello World";


  class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
  }

  class _HomePageState extends State<HomePage> {


    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: new AppBar(
          title:Text("Home Page"),
        ),
        drawer: Example(),
        body: new Text(text),
      );
    }
  }



  class Example extends StatefulWidget {
    @override
    _ExampleState createState() => new _ExampleState();
  }

  class _ExampleState extends State<Example> with TickerProviderStateMixin {

    AnimationController _animationController;
    double animationDuration = 0.0;
    int totalItems = 9;

    @override
    void initState() {
      super.initState();
      final int totalDuration = 1000;
      _animationController = AnimationController(
          vsync: this, duration: new Duration(milliseconds: totalDuration));
      animationDuration = totalDuration/(100*(totalDuration/(totalItems)));
      _animationController.forward();
    }


    @override
    void dispose() {
      _animationController.dispose();
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
      return Container(
            width: 75.0,
            child: ListView.builder(
              itemCount: totalItems,
              itemBuilder: (BuildContext context, int index) {
                return new Item(index: index, animationController: _animationController, duration: animationDuration);
              },
            ),
      );
    }
  }

  class Item extends StatefulWidget {

    final int index;
    final AnimationController animationController;
    final double duration;

    Item({this.index, this.animationController, this.duration});

    @override
    _ItemState createState() => _ItemState();
  }

  class _ItemState extends State<Item> {
    Animation _animation;
    double start;
    double end;
    Animation<double> rotateY;

    @override
    void initState() {
      super.initState();
      start = (widget.duration * widget.index).toDouble();
      end = start + widget.duration;
      print("START $start , end $end");
      _animation = Tween<double>(
        begin: 1.0,
        end: 1.0,
      ).animate(
        CurvedAnimation(
          parent: widget.animationController,
          curve: Interval(
            widget.index == 0 ? start : start - widget.duration/2,
            widget.index == 0 ? end + widget.duration : end + widget.duration/2,
            curve: Curves.easeIn,
          ),
        ),
      )..addListener((){
        setState(() {
        });
      });

      rotateY = new Tween<double>(
        begin: -0.5,
        end: .0,
      ).animate(
        CurvedAnimation(
          parent: widget.animationController,
          curve: Interval(
            widget.index == 0 ? start: start - widget.duration/2,
            widget.index == 0 ? end + widget.duration : end + widget.duration/2,
            curve: Curves.easeIn,
          ),
        ),
      );
    }

    Future<Null> reverse() async {

      await widget.animationController
            .reverse()
            .orCancel;
      Navigator.pop(context);

      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => MyApp()),
      );
    }

    @override
    Widget build(BuildContext context) {
      return new AnimatedBuilder(
            animation: widget.animationController,
            builder: (context, child) {
              final card = Opacity(
                opacity: _animation.value,
                child: new Container(
                  height: 75.0,
                  child: RaisedButton(
                    color: Colors.blueGrey,
                    child: Icon(
                      Icons.ac_unit,
                      color: Colors.white,
                      size: 50.0,
                    ),
                    onPressed: (){
                      reverse();
                    },
                  ),
                ),
              );

              return new Transform(
                transform: new Matrix4.rotationY(rotateY.value * math.pi),
                alignment: Alignment.centerLeft,
                child: card,
              );
            },
          );
    }
  }
    回复于

相关问题