image_picker、video、camera

flute · Jan 20, 2019 · 2712456 · 2712456
1 parent 16ef92e
commit 2712456
Show file tree

Hide file tree

Showing 16 changed files with 563 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,46 @@
-# zh
+### Flutter 入坑指南
 
-A new Flutter project.
+使用Flutter复刻知乎主要界面的UI，借此可熟悉掌握Flutter的布局。同时包含众多常用功能的实践。
+
+涉及到的实践内容包括但不限于：
+
+- 基础布局
+- 搜索栏
+- 滑动视图 横向/纵向
+- Tab切换
+- 底部菜单切换
+- 下拉刷新
+- 上拉加载更多
+- Swipe左右滑动删除等
+- 双击、长按等常用手势
+- HTTP请求
+- 图片选择器
+- 相机Camera调用
+- Video视频播放
+- Audio音频播放
+- Toast/SnackBar提示
+- 常用表单组件、表单校验
+- DatePicker、TimePicker
+- ActionSheet
+- 下拉弹窗菜单 PopupMenuButton
+- 轮播图 Swiper
+- 高斯模糊
+- ...
+
+持续学习中。欢迎加入Flutter开拓交流，群聊号码：236379502
+
+
+<img src="./screenshoot/1.png" width = "49%" />  <img src="./screenshoot/2.png" width = "49%" />
+
+<img src="./screenshoot/3.png" width = "49%" />  <img src="./screenshoot/4.png" width = "49%" />
+
+<img src="./screenshoot/5.png" width = "49%" />  <img src="./screenshoot/6.png" width = "49%" />
+
+<img src="./screenshoot/7.png" width = "49%" />  <img src="./screenshoot/8.png" width = "49%" />
+
+<img src="./screenshoot/9.png" width = "49%" />  <img src="./screenshoot/10.png" width = "49%" />
 
-## Getting Started
 
-This project is a starting point for a Flutter application.
 
-A few resources to get you started if this is your first Flutter project:
 
-- [Lab: Write your first Flutter app](https://flutter.io/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.io/docs/cookbook)
 
-For help getting started with Flutter, view our 
-[online documentation](https://flutter.io/docs), which offers tutorials, 
-samples, guidance on mobile development, and a full API reference.
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
@@ -41,5 +41,20 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+  <key>NSPhotoLibraryUsageDescription</key>
+  <string>Can I use the PhotoLibrary please?</string>
+  <key>NSMicrophoneUsageDescription</key>
+  <string>Can I use the mic please?</string>
+  <key>NSCameraUsageDescription</key>
+  <string>Can I use camera please?</string>
+  <key>NSCameraUsageDescription</key>
+  <string>Can I use the camera please?</string>
+  <key>NSMicrophoneUsageDescription</key>
+  <string>Can I use the mic please?</string>
+  <key>NSAppTransportSecurity</key>
+  <dict>
+    <key>NSAllowsArbitraryLoads</key>
+    <true/>
+  </dict>
 </dict>
 </plist>
diff --git a/lib/bottomTabs/colleague.dart b/lib/bottomTabs/colleague.dart
@@ -2,6 +2,8 @@ import 'dart:convert';
 import 'dart:io';
 import 'package:flutter/material.dart';
 import 'dart:async';
+import 'package:flutter_slidable/flutter_slidable.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 
 class ColleagueTab extends StatefulWidget {
   @override
@@ -109,7 +111,7 @@ class ColleagueTabState extends State<ColleagueTab> {
     // TODO: implement build
     return new Scaffold(
       appBar: new AppBar(
-        title: new Text('网络请求、下拉、上滑'),
+        title: new Text('网络请求-下拉上滑-左右滑动-长按'),
       ),
       body: new RefreshIndicator(
         onRefresh: _onRefresh,
@@ -120,7 +122,7 @@ class ColleagueTabState extends State<ColleagueTab> {
             //return new Text('$i');
             if(i == _jsonData.length) return _getMoreLoading();
             return new Container(
-              padding: EdgeInsets.only(left: 10, right: 10),
+              //padding: EdgeInsets.only(left: 10, right: 10),
               height: 80,
               decoration: BoxDecoration(
                 border: Border(
@@ -135,7 +137,8 @@ class ColleagueTabState extends State<ColleagueTab> {
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
-                  Text(
+                  _swipe(i+1, _jsonData[i]['title'], _jsonData[i]['posterScreenName'])
+                  /* Text(
                     '${i+1} . '+_jsonData[i]['title'],
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
@@ -144,26 +147,95 @@ class ColleagueTabState extends State<ColleagueTab> {
                   Text(
                     _jsonData[i]['posterScreenName'],
                     style: TextStyle(color: Colors.blue[300]),
-                  )
+                  ) */
                 ],
               ),
 
             );
           },
-        ),
-        /* child: new SingleChildScrollView(
-          controller: _controller,
-          child: new Container(
-            padding: EdgeInsets.all(10),
-            child: new Column(
-              children: <Widget>[
-                Text('下拉刷新'),
-                new Text(_jsonData)
-              ],
+        )
+      )
+    );
+  }
+
+  void _showSnackBar(String title) {
+    Scaffold.of(context).showSnackBar(
+      SnackBar(content: Text(title))
+    );
+  }
+
+void _showToast(String title) {
+  Fluttertoast.showToast(
+    msg: title,
+    toastLength: Toast.LENGTH_SHORT,
+    gravity: ToastGravity.CENTER,
+    timeInSecForIos: 1,
+    backgroundColor: Color.fromRGBO(0, 0, 0, 0.85),
+    textColor: Colors.white
+  );
+}
+
+  // 左右滑动
+  Widget _swipe(int i, String title, String desc) {
+    return new Slidable(
+      delegate: new SlidableDrawerDelegate(),
+      actionExtentRatio: 0.25,
+      child: new Container(
+        color: Colors.white,
+        child: new GestureDetector(
+          onTap: (){_showToast('点击: $i');},
+          onDoubleTap: (){_showToast('连点: $i');},
+          onLongPress: (){_showToast('长按: $i');},
+          child: new ListTile(
+            leading: new CircleAvatar(
+              backgroundColor: Colors.grey[200],
+              child: new Text(
+                '$i',
+                style: TextStyle(color: Colors.orange),
+              ),
+              foregroundColor: Colors.white,
+            ),
+            title: new Text(
+              '$title',
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(color: Colors.black87, fontSize: 16),
+            ),
+            subtitle: new Text(
+              '$desc',
+              style: TextStyle(color: Colors.blue[300]),
             ),
           ),
-        ), */
-      )
+        )
+      ),
+      actions: <Widget>[
+        new IconSlideAction(
+          caption: 'Archive',
+          color: Colors.blue,
+          icon: Icons.archive,
+          onTap: () => _showSnackBar('Archive'),
+        ),
+        new IconSlideAction(
+          caption: 'Share',
+          color: Colors.indigo,
+          icon: Icons.share,
+          onTap: () => _showSnackBar('Share'),
+        ),
+      ],
+      secondaryActions: <Widget>[
+        new IconSlideAction(
+          caption: 'More',
+          color: Colors.black45,
+          icon: Icons.more_horiz,
+          onTap: () => _showSnackBar('More'),
+        ),
+        new IconSlideAction(
+          caption: 'Delete',
+          color: Colors.red,
+          icon: Icons.delete,
+          onTap: () => _showSnackBar('Delete'),
+        ),
+      ],
     );
   }
 }