20190926

lib/main.dart

@@ -1,3 +1,5 @@
+import 'dart:ffi';
+
 import 'package:douyin_demo/pages/RecommendPage/BottomSheet.dart';
 import 'package:douyin_demo/providers/RecommendProvider.dart';
 import 'package:flutter/material.dart';
@@ -6,6 +8,8 @@ import 'package:marquee_flutter/marquee_flutter.dart';
 import 'package:provider/provider.dart';
 import 'package:video_player/video_player.dart';
 
+import 'widgets/FavAnimation.dart';
+
 void main() {
   runApp(MyApp());
 }
@@ -24,6 +28,7 @@ class MyApp extends StatelessWidget {
             )
           ],
           child: Scaffold(
+            resizeToAvoidBottomInset:false,
             body: Container(
               decoration: BoxDecoration(color: Colors.black),
               child: Stack(children: [
@@ -43,7 +48,9 @@ class BottomSafeBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     RecommendProvider provider = Provider.of<RecommendProvider>(context);
+    // double toBottom=MediaQuery.of(context).viewInsets.bottom;
     return Container(
+      padding: EdgeInsets.only(bottom: 0),
       decoration: BoxDecoration(color: Colors.black),
       child: SafeArea(
           child: BottomAppBar(
@@ -121,6 +128,7 @@ class Home extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    print("rebuild");
     double screenWidth = MediaQuery.of(context).size.width;
     double screenHeight = MediaQuery.of(context).size.height;
     RecommendProvider provider = Provider.of<RecommendProvider>(context);
@@ -339,26 +347,26 @@ class BtnContent extends StatelessWidget {
               ),
               // Marquee(text: "",),
 
-              Container(
-                  width: 200,
-                  height: 20,
-                  child: MarqueeWidget(
-                    text: '${provider.mainInfo.desc}',
-                    textStyle: TextStyle(
-                        fontWeight: FontWeight.bold,
-                        color: Colors.white,
-                        fontSize: 16),
-                    // scrollAxis: Axis.horizontal,
-                    // crossAxisAlignment: CrossAxisAlignment.start,
-                    // blankSpace: 20.0,
-                    // velocity: 100.0,
-                    // pauseAfterRound: Duration(seconds: 1),
-                    // startPadding: 10.0,
-                    // accelerationDuration: Duration(seconds: 1),
-                    // accelerationCurve: Curves.linear,
-                    // decelerationDuration: Duration(milliseconds: 500),
-                    // decelerationCurve: Curves.easeOut,
-                  ))
+              // Container(
+              //     width: 200,
+              //     height: 20,
+              //     child: MarqueeWidget(
+              //       text: '${provider.mainInfo.desc}',
+              //       textStyle: TextStyle(
+              //           fontWeight: FontWeight.bold,
+              //           color: Colors.white,
+              //           fontSize: 16),
+              //       // scrollAxis: Axis.horizontal,
+              //       // crossAxisAlignment: CrossAxisAlignment.start,
+              //       // blankSpace: 20.0,
+              //       // velocity: 100.0,
+              //       // pauseAfterRound: Duration(seconds: 1),
+              //       // startPadding: 10.0,
+              //       // accelerationDuration: Duration(seconds: 1),
+              //       // accelerationCurve: Curves.linear,
+              //       // decelerationDuration: Duration(milliseconds: 500),
+              //       // decelerationCurve: Curves.easeOut,
+              //     ))
             ],
           )
         ],
@@ -411,6 +419,7 @@ getButtonList(double rpx, RecommendProvider provider, BuildContext context) {
   double iconSize = 70 * rpx;
   return Column(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
+    crossAxisAlignment: CrossAxisAlignment.center,
     children: <Widget>[
       Container(
           width: 90 * rpx,
@@ -445,20 +454,19 @@ getButtonList(double rpx, RecommendProvider provider, BuildContext context) {
       IconText(
         text: "${provider.mainInfo.favCount}",
         icon: IconButton(
+          padding: EdgeInsets.all(0),
             onPressed: () {
               provider.tapFav();
             },
-            icon: Icon(
-              Icons.favorite,
+            icon: provider.mainInfo.ifFaved? AnimateFav(
               size: iconSize,
-              color: provider.mainInfo.ifFaved
-                  ? Colors.redAccent
-                  : Colors.grey[100],
-            )),
+            ):AnimatedUnFav(size: iconSize,)
+          ),
       ),
       IconText(
         text: "${provider.mainInfo.replyCount}",
         icon: IconButton(
+          padding: EdgeInsets.all(0),
             onPressed: () {
               showBottom(context);
             },
@@ -471,6 +479,7 @@ getButtonList(double rpx, RecommendProvider provider, BuildContext context) {
       IconText(
         text: "${provider.mainInfo.shareCount}",
         icon: IconButton(
+          padding: EdgeInsets.all(0),
             onPressed: () {},
             icon: Icon(
               Icons.reply,
@@ -488,16 +497,19 @@ class IconText extends StatelessWidget {
   final String text;
   @override
   Widget build(BuildContext context) {
+    double rpx=MediaQuery.of(context).size.width/750;
     return Container(
       child: Column(
         mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,  
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           icon,
           Container(
-              alignment: Alignment.center,
+              // alignment: Alignment.center,
               child: Text(
                 text,
-                style: TextStyle(color: Colors.white, fontSize: 11),
+                style: TextStyle(color: Colors.white, fontSize: 25*rpx),
               )),
         ],
       ),
@@ -515,13 +527,16 @@ showBottom(context) {
       context: context,
       builder: (_) {
         return MultiProvider(
-          providers: [ChangeNotifierProvider(builder: (context)=>RecommendProvider(),)],
-          
-            child: Container(
-              height: 600,
-              child: ReplyFullList()),
+          providers: [
+            ChangeNotifierProvider(
+              builder: (context) => RecommendProvider(),
             )
-          ;
+          ],
+          child: Container(height: 600, child: GestureDetector(
+            onTap: (){FocusScope.of(context).requestFocus(FocusNode());},
+            child: ReplyFullList()
+          )),
+        );
       });
-      
 }
+

lib/pages/RecommendPage/BottomSheet.dart

@@ -16,29 +16,40 @@ class ReplyFullList extends StatelessWidget {
     replies.add(reply);
     replies.add(reply);
     ScrollController controller = ScrollController();
-    return SingleChildScrollView(
-        controller: controller,
-        child: Container(
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: <Widget>[
-              Container(
-                height: 80 * rpx,
-                child: ListTile(
-                  leading: Container(
-                    width: 10 * rpx,
-                  ),
-                  trailing: IconButton(
-                    icon: Icon(Icons.close),
-                    onPressed: () {},
-                  ),
-                  title: Center(child: Text("10条评论")),
+    return Scaffold(
+        appBar: PreferredSize(
+          preferredSize: Size.fromHeight(80*rpx),
+          child: AppBar(
+            leading: Container(),
+            elevation:0,
+            backgroundColor: Colors.grey[50],
+            actions: <Widget>[
+              
+              IconButton(
+                icon: Icon(
+                  Icons.close,
+                  color: Colors.black,
                 ),
-              ),
-              genReplyList(replies, controller)
+                onPressed: () {
+                  Navigator.pop(context);
+                },
+              )
             ],
-          ),
-        ));
+            title: Text(
+              "10条评论",
+              style: TextStyle(color: Colors.grey[700],fontSize: 25*rpx),
+            ),
+            // elevation: 1,
+          )
+        ),
+        bottomNavigationBar: SafeArea(
+          child: BottomReplyBar(),
+        ),
+        body: SingleChildScrollView(
+            controller: controller,
+            child: Container(
+              child: genReplyList(replies, controller),
+            )));
   }
 }
 
@@ -138,8 +149,7 @@ class AfterReply extends StatelessWidget {
                               style: TextStyle(color: Colors.grey[500]),
                               children: [
                                 TextSpan(text: "  ${afterReply.whenReplied}")
-                              ]
-                              ),
+                              ]),
                         ),
 
                         // Text(
@@ -196,3 +206,30 @@ genAfterReplyList(List<Reply> replies, ScrollController controller) {
     },
   );
 }
+
+class BottomReplyBar extends StatelessWidget {
+  const BottomReplyBar({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    TextEditingController _controller=TextEditingController();
+    double toBottom=MediaQuery.of(context).viewInsets.bottom;
+    double rpx=MediaQuery.of(context).size.width/750;
+    return Container(
+      padding: EdgeInsets.only(bottom: toBottom),
+      decoration: BoxDecoration(border: Border(top: BorderSide(color: Colors.grey[200],width: 1))),
+      child: Row(children: <Widget>[
+        Expanded(
+          child: Container(
+            padding: EdgeInsets.only(left: 30*rpx),
+            // width: 600*rspx,
+            child: TextField(controller: _controller,decoration: InputDecoration(hintText: "留下你的精彩评论",border: InputBorder.none),),
+          )
+        ),
+        IconButton(icon: Icon(Icons.email,color: Colors.grey[500],size: 50*rpx,),onPressed: (){},),
+        IconButton(icon: Icon(Icons.face,color: Colors.grey[500],size: 50*rpx),onPressed: (){},),
+        SizedBox(width: 20*rpx,)
+      ],),
+    );
+  }
+}

lib/widgets/FavAnimation.dart

@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+
+class AnimateFav extends StatefulWidget {
+  AnimateFav({Key key, this.size}) : super(key: key);
+  final double size;
+
+  _AnimateFavState createState() => _AnimateFavState();
+}
+
+class _AnimateFavState extends State<AnimateFav>
+    with TickerProviderStateMixin {
+  AnimationController _controller_1;
+  AnimationController _controller_2;
+  Animation<double> _animation_1;
+  Animation<double> _animation_2;
+  Animation<double> curAnimation;
+  double rpx;
+  @override
+  void initState() {
+    super.initState();
+
+    _controller_1 =
+        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
+    _controller_2 =
+        AnimationController(vsync: this, duration: Duration(milliseconds: 200));
+    _animation_1 = Tween(begin: 0.0, end: 1.3).animate(_controller_1)
+      ..addStatusListener((status) {
+        if (status == AnimationStatus.completed) {
+          _controller_2.forward(from: 0);
+          setState(() {
+            curAnimation = _animation_2;
+          });
+        }
+      })
+      ..addListener(() {
+        setState(() {});
+      });
+    _animation_2 = Tween(begin: 1.3, end: 1.0).animate(_controller_2)
+      ..addListener(() {
+        setState(() {});
+      });
+    curAnimation = _animation_1;
+    _controller_1.forward(from: 0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    rpx = MediaQuery.of(context).size.width / 750;
+    return Center(
+        child: Icon(
+      Icons.favorite,
+      size: widget.size * curAnimation.value,
+      color: Colors.redAccent,
+    ));
+  }
+}
+
+
+class AnimatedUnFav extends StatefulWidget {
+  AnimatedUnFav({Key key,@required this.size}) : super(key: key);
+  final double size;
+  _AnimatedUnFavState createState() => _AnimatedUnFavState();
+}
+
+class _AnimatedUnFavState extends State<AnimatedUnFav> with TickerProviderStateMixin {
+  AnimationController _controller_1;
+  AnimationController _controller_2;
+  Animation<double> _animation_1;
+  Animation<double> _animation_2;
+  Animation<double> curAnimation;
+  Color curColor;
+  @override
+  void initState() {
+    super.initState();
+    curColor=Colors.redAccent;
+    _controller_1 =
+        AnimationController(vsync: this, duration: Duration(milliseconds: 100));
+    _controller_2 =
+        AnimationController(vsync: this, duration: Duration(milliseconds: 100));
+    _animation_1 = Tween(begin: 1.0, end: 1.2).animate(_controller_1)
+      ..addStatusListener((status) {
+        if (status == AnimationStatus.completed) {
+          _controller_2.forward(from: 0);
+          setState(() {
+            curAnimation = _animation_2;
+            curColor=Colors.grey[100];
+          });
+        }
+      })
+      ..addListener(() {
+        setState(() {});
+      });
+    _animation_2 = Tween(begin: 1.2, end: 1.0).animate(_controller_2)
+      ..addListener(() {
+        setState(() {});
+      });
+    curAnimation = _animation_1;
+    _controller_1.forward(from: 0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // rpx = MediaQuery.of(context).size.width / 750;
+    return Center(
+        child: Icon(
+      Icons.favorite,
+      size: widget.size * curAnimation.value,
+      color: curColor,
+    ));
+  }
+}