add video recorder

ios/Podfile.lock

@@ -2,6 +2,10 @@ PODS:
   - camera (0.0.1):
     - Flutter
   - Flutter (1.0.0)
+  - image_gallery_saver (0.0.1):
+    - Flutter
+  - image_picker_saver (0.0.1):
+    - Flutter
   - path_provider (0.0.1):
     - Flutter
   - shared_preferences (0.0.1):
@@ -12,6 +16,8 @@ PODS:
 DEPENDENCIES:
   - camera (from `.symlinks/plugins/camera/ios`)
   - Flutter (from `.symlinks/flutter/ios`)
+  - image_gallery_saver (from `.symlinks/plugins/image_gallery_saver/ios`)
+  - image_picker_saver (from `.symlinks/plugins/image_picker_saver/ios`)
   - path_provider (from `.symlinks/plugins/path_provider/ios`)
   - shared_preferences (from `.symlinks/plugins/shared_preferences/ios`)
   - video_player (from `.symlinks/plugins/video_player/ios`)
@@ -21,6 +27,10 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/camera/ios"
   Flutter:
     :path: ".symlinks/flutter/ios"
+  image_gallery_saver:
+    :path: ".symlinks/plugins/image_gallery_saver/ios"
+  image_picker_saver:
+    :path: ".symlinks/plugins/image_picker_saver/ios"
   path_provider:
     :path: ".symlinks/plugins/path_provider/ios"
   shared_preferences:
@@ -31,6 +41,8 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   camera: 38cc83ae9a5667bb5a71c7d9edaf60a91920fd4e
   Flutter: 0e3d915762c693b495b44d77113d4970485de6ec
+  image_gallery_saver: 73b3cd8ad9c950c739878af9c311744d1bf5405d
+  image_picker_saver: 4f28bd70e1efdca68ad88beab0f11d22cffe04f6
   path_provider: fb74bd0465e96b594bb3b5088ee4a4e7bb1f2a9d
   shared_preferences: 1feebfa37bb57264736e16865e7ffae7fc99b523
   video_player: 3964090a33353060ed7f58aa6427c7b4b208ec21

lib/pages/CameraPage/CameraMain.dart

@@ -1,28 +1,32 @@
 import 'dart:io';
 
 import 'package:camera/camera.dart';
-import 'package:camera/new/src/support_android/camera.dart';
 import 'package:douyin_demo/providers/CameraProvider.dart';
 import 'package:flutter/material.dart';
+import 'package:image_gallery_saver/image_gallery_saver.dart';
 import 'package:provider/provider.dart';
 import 'package:path/path.dart' as p;
 import 'package:image_picker_saver/image_picker_saver.dart';
-
+import 'dart:core';
 
 class CameraPage extends StatelessWidget {
   const CameraPage({Key key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Theme.of(context).primaryColor,
-      body: MultiProvider(providers: [
-        ChangeNotifierProvider(
-          builder: (_) => CameraProvider(),
-        )
-      ], child: CameraMain()),
-      bottomNavigationBar: BottomAppBar(),
-    );
+    double rpx = MediaQuery.of(context).size.width / 750;
+    return MultiProvider(
+        providers: [ChangeNotifierProvider(builder: (_) => CameraProvider())],
+        child: Scaffold(
+          backgroundColor: Theme.of(context).primaryColor,
+          body: CameraMain(),
+          // bottomNavigationBar: SafeArea(
+          //   child: Container(
+          //     height: 100*rpx,
+          //     child: BottomTab()
+          //   )
+          // ),
+        ));
   }
 }
 
@@ -92,19 +96,16 @@ class CameraMain extends StatelessWidget {
     final size = MediaQuery.of(context).size;
     return _controller.value.isInitialized
         ? Stack(children: <Widget>[
-            // Camera.open(cameraId),
-
             ClipRect(
-              child: Transform.scale(
-                scale: _controller.value.aspectRatio / size.aspectRatio,
-                child: Center(
-                  child: AspectRatio(
-                    aspectRatio: _controller.value.aspectRatio,
-                    child: CameraPreview(_controller),
-                  ),
+                child: Transform.scale(
+              scale: _controller.value.aspectRatio / size.aspectRatio,
+              child: Center(
+                child: AspectRatio(
+                  aspectRatio: _controller.value.aspectRatio,
+                  child: CameraPreview(_controller),
                 ),
-              )
-            ),
+              ),
+            )),
             Positioned(
               //顶部关闭按钮
               top: toTop,
@@ -148,29 +149,63 @@ class CameraMain extends StatelessWidget {
             ),
             Positioned(
               //拍照按钮
-              bottom: 60 * rpx,
+              bottom: 100 * rpx,
               // left: (750*rpx-outBox)/2,
               child: Container(
                   width: 750 * rpx,
                   child: Row(
                       mainAxisAlignment: MainAxisAlignment.spaceAround,
                       children: [
-                        IconWithText(
-                            icon: Icon(
-                              Icons.search,
-                              color: Colors.white,
-                            ),
-                            text: "道具"),
-                        CircleTakePhoto(
-                          outBox: outBox,
-                          innerBox: innerBox,
+                        provider.ifMakeVideo
+                            ? Container(width: 80*rpx,)
+                            : IconWithText(
+                                icon: Icon(
+                                  Icons.search,
+                                  color: Colors.white,
+                                ),
+                                text: "道具"),
+                        AnimatedSwitcher(
+                          duration: Duration(milliseconds: 300),
+                          child: provider.ifMakeVideo
+                              ? VideoButtonAnim(
+                                  provider: provider,
+                                  rpx: rpx,
+                                  outWidth: outBox,
+                                  innerWidth: innerBox - 40 * rpx,
+                                )
+                              : CircleTakePhoto(
+                                  outBox: outBox,
+                                  innerBox: innerBox,
+                                ),
                         ),
-                        IconWithText(
-                            icon: Icon(
-                              Icons.search,
-                              color: Colors.white,
-                            ),
-                            text: "道具"),
+                        provider.ifMakeVideo
+                            ? Container(
+                                child: IconButton(
+                                  padding: EdgeInsets.all(0),
+                                  icon: Icon(
+                                    Icons.check_circle,
+                                    color: Color.fromARGB(128, 219, 48, 85),
+                                    size: 80*rpx,
+                                  ),
+                                  onPressed: () async {
+                                    provider.cameraController
+                                        .stopVideoRecording();
+                                    // await ImagePickerSaver.saveFile(
+                                    //     fileData: File(provider.fileName)
+                                    //         .readAsBytesSync());
+
+                                    await ImageGallerySaver.saveFile(provider.fileName);
+                                    File(provider.fileName).deleteSync();
+                                    provider.changePhotoWidget();
+                                  },
+                                ),
+                              )
+                            : IconWithText(
+                                icon: Icon(
+                                  Icons.search,
+                                  color: Colors.white,
+                                ),
+                                text: "道具"),
                       ])),
             ),
             Positioned(
@@ -181,12 +216,262 @@ class CameraMain extends StatelessWidget {
                   onPressed: () {
                     provider.changeCamera();
                   }),
-            )
+            ),
+            provider.ifMakeVideo//底部导航栏
+                ? Container()
+                : Positioned(
+                    bottom: 0,
+                    left: 0,
+                    child: ScrollTabBar(
+                      rpx: rpx,
+                    ),
+                  )
           ])
         : Container();
   }
 }
 
+class ScrollTabBar extends StatefulWidget {
+  ScrollTabBar({Key key, @required this.rpx}) : super(key: key);
+  final double rpx;
+  _ScrollTabBarState createState() => _ScrollTabBarState();
+}
+
+class _ScrollTabBarState extends State<ScrollTabBar>
+    with AutomaticKeepAliveClientMixin {
+  double curCenter = 0;
+  ScrollController controller;
+  List<String> items = ['拍照', '拍15秒', '拍60秒', '影集', '直播'];
+  double eachWidth;
+  double eachSide;
+  double rpx;
+  double maxPos;
+  double minPos;
+  double startDx = 0;
+  double finalDx = 0;
+  int curIndex = 2;
+  @override
+  void initState() {
+    super.initState();
+    rpx = widget.rpx;
+    eachWidth = 130 * rpx;
+    eachSide = (750 - eachWidth / rpx) / 2 * rpx;
+    curCenter = curIndex * eachWidth;
+    maxPos = eachWidth * items.length;
+    minPos = 0;
+    controller = ScrollController(initialScrollOffset: curCenter);
+  }
+
+  moveToItem(index) {
+    controller.animateTo(index * eachWidth,
+        duration: Duration(milliseconds: 200), curve: Curves.linearToEaseOut);
+    setState(() {
+      curCenter = index * eachWidth;
+      curIndex = index;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Listener(
+        onPointerDown: (result) {
+          setState(() {
+            startDx = result.position.dx;
+          });
+        },
+        onPointerUp: (result) {
+          finalDx = result.position.dx;
+          double finalPosition = curCenter + startDx - finalDx;
+          int index = (finalPosition / eachWidth).floor();
+          // print('curCenter=$index,moveTo:$index');
+          moveToItem(index);
+        },
+        child: Container(
+            width: 750 * rpx,
+            child: Column(children: [
+              SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                controller: controller,
+                child: Column(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Row(
+                        children: <Widget>[
+                          Container(
+                            width: eachSide,
+                          ),
+                          Row(
+                            children: List.generate(
+                                items.length,
+                                (index) => Container(
+                                      width: eachWidth,
+                                      child: FlatButton(
+                                        padding: EdgeInsets.all(0),
+                                        child: Text(
+                                          items[index],
+                                          style: TextStyle(
+                                              fontSize: 28 * rpx,
+                                              color: curIndex == index
+                                                  ? Colors.white
+                                                  : Colors.white
+                                                      .withOpacity(0.3)),
+                                        ),
+                                        onPressed: () {
+                                          moveToItem(index);
+                                        },
+                                      ),
+                                    )),
+                          ),
+                          Container(
+                            width: eachSide,
+                          ),
+                        ],
+                      ),
+                    ]),
+              ),
+              Container(
+                height: 8 * rpx,
+                width: 750 * rpx,
+                child: Center(
+                    child: Container(
+                  decoration: BoxDecoration(
+                      shape: BoxShape.circle, color: Colors.white),
+                )),
+              ),
+              SizedBox(
+                height: 10 * rpx,
+              )
+            ])));
+  }
+
+  @override
+  // TODO: implement wantKeepAlive
+  bool get wantKeepAlive => true;
+}
+
+class VideoButtonAnim extends StatefulWidget {
+  VideoButtonAnim(
+      {Key key,
+      @required this.rpx,
+      @required this.outWidth,
+      @required this.innerWidth,
+      @required this.provider})
+      : super(key: key);
+  final double rpx;
+  final double outWidth;
+  final double innerWidth;
+  final CameraProvider provider;
+  _VideoButtonAnimState createState() => _VideoButtonAnimState();
+}
+
+class _VideoButtonAnimState extends State<VideoButtonAnim>
+    with TickerProviderStateMixin {
+  double extraPadding = 0; //内外圆之间距离
+  double borderWidth = 0;
+  double outWidth = 0;
+  double innerWidth = 0;
+  double minDist = 0;
+  double rpx = 0;
+  Animation<double> animation;
+  AnimationController controller;
+  CameraProvider provider;
+  bool ifPauseVideo = false;
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    rpx = widget.rpx;
+    outWidth = widget.outWidth;
+    innerWidth = widget.innerWidth;
+    provider = widget.provider;
+    minDist = 10 * rpx;
+    extraPadding = (outWidth - innerWidth) / 2 - borderWidth;
+    borderWidth = 15 * rpx;
+    controller =
+        AnimationController(duration: Duration(milliseconds: 800), vsync: this);
+    animation =
+        Tween(begin: (outWidth - innerWidth) / 2 - borderWidth, end: minDist)
+            .animate(controller)
+              ..addListener(() {
+                setState(() {
+                  borderWidth = animation.value;
+                  extraPadding = (outWidth - innerWidth) / 2 - animation.value;
+                });
+              });
+    controller.repeat(reverse: true);
+    // controller.forward(from: 0.0).then((f){
+    //   controller.reverse(from: 1.0);
+    // });
+  }
+
+  pauseAnimation() {
+    controller.reset();
+    provider.cameraController.pauseVideoRecording();
+    setState(() {
+      ifPauseVideo = true;
+    });
+  }
+
+  playAnimation() {
+    controller.repeat(reverse: true);
+    provider.cameraController.resumeVideoRecording();
+    setState(() {
+      ifPauseVideo = false;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: outWidth,
+      height: outWidth,
+      decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: Border.all(
+              width: borderWidth, color: Color.fromARGB(128, 219, 48, 85))),
+      padding: EdgeInsets.all(extraPadding),
+      child: Center(
+        child: Container(
+          width: innerWidth,
+          height: innerWidth,
+          // decoration: BoxDecoration(
+          //     color: Color.fromARGB(255, 219, 48, 85),
+          //     borderRadius: BorderRadius.circular(20 * rpx)),
+          child: ifPauseVideo
+              ? IconButton(
+                  padding: EdgeInsets.all(0),
+                  icon: Icon(
+                    Icons.pause_circle_filled,
+                    size: innerWidth,
+                    color: Color.fromARGB(255, 219, 48, 85),
+                  ),
+                  onPressed: () {
+                    playAnimation();
+                  },
+                )
+              : IconButton(
+                  padding: EdgeInsets.all(0),
+                  icon: Icon(
+                    Icons.play_circle_filled,
+                    size: innerWidth,
+                    color: Color.fromARGB(255, 219, 48, 85),
+                  ),
+                  onPressed: () {
+                    pauseAnimation();
+                  },
+                ),
+        ),
+      ),
+    );
+  }
+}
 
 class CircleTakePhoto extends StatelessWidget {
   const CircleTakePhoto(
@@ -198,7 +483,7 @@ class CircleTakePhoto extends StatelessWidget {
   Widget build(BuildContext context) {
     double rpx = MediaQuery.of(context).size.width / 750;
     CameraProvider provider = Provider.of<CameraProvider>(context);
-    
+
     // double outBox=160*rpx;
     // double innerBox=130*rpx;
     return Container(
@@ -212,26 +497,33 @@ class CircleTakePhoto extends StatelessWidget {
             width: 10 * rpx, color: Color.fromARGB(128, 219, 48, 85)),
       ),
       child: FlatButton(
-        padding: EdgeInsets.all(0),
-        onPressed: () async {
-          provider.changeFileName();
-          print(provider.fileName);
-          await provider.cameraController.takePicture(provider.fileName).then((_){
-            // Navigator.push(context, MaterialPageRoute(fullscreenDialog: true,builder: (_){
-            //   return Image.file(File(provider.fileName) );
-            // }));
-            ImagePickerSaver.saveFile(fileData: File(provider.fileName).readAsBytesSync());
-          });
-        },
-        child: Container(
-          width: innerBox,
-          height: innerBox,
-          alignment: Alignment.center,
-          decoration: BoxDecoration(
-              color: Color.fromARGB(255, 219, 48, 85),
-              borderRadius: BorderRadius.circular(75 * rpx)),
-        )
-      ),
+          padding: EdgeInsets.all(0),
+          onPressed: () async {
+            // provider.changeFileName();
+            // print(provider.fileName);
+            // await provider.cameraController
+            //     .takePicture(provider.fileName)
+            //     .then((_) {
+            //   // Navigator.push(context, MaterialPageRoute(fullscreenDialog: true,builder: (_){
+            //   //   return Image.file(File(provider.fileName) );
+            //   // }));
+
+            //   ImagePickerSaver.saveFile(
+            //       fileData: File(provider.fileName).readAsBytesSync());
+            //   File(provider.fileName).deleteSync();
+            // });
+            provider.changePhotoWidget();
+            provider.changeFileName('mp4');
+            provider.cameraController.startVideoRecording(provider.fileName);
+          },
+          child: Container(
+            width: innerBox,
+            height: innerBox,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+                color: Color.fromARGB(255, 219, 48, 85),
+                borderRadius: BorderRadius.circular(75 * rpx)),
+          )),
     );
   }
 }

lib/providers/CameraProvider.dart

@@ -7,33 +7,39 @@ import 'package:path/path.dart' as p;
 import 'package:path_provider/path_provider.dart';
 import 'package:uuid/uuid.dart';
 
-class CameraProvider with ChangeNotifier {
+class CameraProvider extends State<StatefulWidget>
+    with ChangeNotifier, TickerProviderStateMixin {
   CameraController cameraController;
+  TabController tabController;
   List<CameraDescription> cameras;
   int curCamera = 0;
   String appFolder = "";
   String fileName;
+  Widget photoButton;
+  bool ifMakeVideo=false;
 
   CameraProvider() {
+    tabController=TabController(length: 6,vsync: this);
     getCameras();
   }
 
-  changeFileName(){
-    String id=Uuid().v4().toString();
-    fileName=p.join(appFolder,'$id.png');
+  changeFileName(afterFix) {
+    String id = Uuid().v4().toString();
+    fileName = p.join(appFolder, '$id.$afterFix');
     notifyListeners();
   }
 
   getCameras() async {
     Directory appDocDir = await getApplicationDocumentsDirectory();
-    if(!Directory(appDocDir.path).existsSync()){
+    if (!Directory(appDocDir.path).existsSync()) {
       appDocDir.createSync();
     }
     appFolder = appDocDir.path;
     cameras = await availableCameras();
     cameraController =
-        CameraController(cameras[curCamera], ResolutionPreset.max);
+        CameraController(cameras[curCamera], ResolutionPreset.high);
     cameraController.initialize().then((_) {
+      cameraController.prepareForVideoRecording();
       notifyListeners();
     });
   }
@@ -50,4 +56,17 @@ class CameraProvider with ChangeNotifier {
       notifyListeners();
     });
   }
+
+  changePhotoWidget(){
+    ifMakeVideo=!ifMakeVideo;
+    notifyListeners();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO: implement build
+    return null;
+  }
+
+
 }

pubspec.lock

@@ -242,6 +242,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "3.1.3"
+  image_gallery_saver:
+    dependency: "direct main"
+    description:
+      name: image_gallery_saver
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.2.2"
   image_picker_saver:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -39,6 +39,7 @@ dependencies:
   path:
   uuid:
   image_picker_saver:
+  image_gallery_saver:
     
 dev_dependencies:
   flutter_test: