update ui

README.md

@@ -12,6 +12,9 @@ For questions and general discussions check out our
 
 [issue tracker]: https://github.com/memspace/zefyr/issues
 
+## PhotoManager
+请检查配置，相册预览使用了[PhotoManager](https://github.com/CaiJingLong/flutter_photo_manager/blob/master/README.md)
+
 ## Clean and modern look
 
 Zefyr's rich text editor is built with simplicity and flexibility in

packages/zefyr/example/ios/Flutter/flutter_export_environment.sh

@@ -1,11 +1,12 @@
 #!/bin/sh
 # This is a generated file; do not edit or check into version control.
-export "FLUTTER_ROOT=/Users/anatoly/Projects/flutter"
-export "FLUTTER_APPLICATION_PATH=/Users/anatoly/Projects/zefyr/packages/zefyr/example"
-export "FLUTTER_TARGET=/Users/anatoly/Projects/zefyr/packages/zefyr/example/lib/main.dart"
+export "FLUTTER_ROOT=/Users/imac/.fvm/versions/latest-dev"
+export "FLUTTER_APPLICATION_PATH=/Users/imac/Documents/flutter/projects/zefyr/packages/zefyr/example"
+export "FLUTTER_TARGET=/Users/imac/Documents/flutter/projects/zefyr/packages/zefyr/example/lib/main.dart"
 export "FLUTTER_BUILD_DIR=build"
 export "SYMROOT=${SOURCE_ROOT}/../build/ios"
-export "FLUTTER_FRAMEWORK_DIR=/Users/anatoly/Projects/flutter/bin/cache/artifacts/engine/ios"
+export "OTHER_LDFLAGS=$(inherited) -framework Flutter"
+export "FLUTTER_FRAMEWORK_DIR=/Users/imac/.fvm/versions/latest-dev/bin/cache/artifacts/engine/ios"
 export "FLUTTER_BUILD_NAME=1.0.0"
 export "FLUTTER_BUILD_NUMBER=1"
 export "TRACK_WIDGET_CREATION=true"

packages/zefyr/example/ios/Podfile

@@ -1,5 +1,5 @@
 # Uncomment this line to define a global platform for your project
-# platform :ios, '9.0'
+platform :ios, '9.0'
 
 # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
 ENV['COCOAPODS_DISABLE_STATS'] = 'true'

packages/zefyr/example/ios/Podfile.lock

@@ -4,6 +4,8 @@ PODS:
     - Flutter
   - image_picker (0.0.1):
     - Flutter
+  - photo_manager (0.0.1):
+    - Flutter
   - url_launcher (0.0.1):
     - Flutter
   - url_launcher_macos (0.0.1):
@@ -15,6 +17,7 @@ DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_plugin_android_lifecycle (from `.symlinks/plugins/flutter_plugin_android_lifecycle/ios`)
   - image_picker (from `.symlinks/plugins/image_picker/ios`)
+  - photo_manager (from `.symlinks/plugins/photo_manager/ios`)
   - url_launcher (from `.symlinks/plugins/url_launcher/ios`)
   - url_launcher_macos (from `.symlinks/plugins/url_launcher_macos/ios`)
   - url_launcher_web (from `.symlinks/plugins/url_launcher_web/ios`)
@@ -26,6 +29,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_plugin_android_lifecycle/ios"
   image_picker:
     :path: ".symlinks/plugins/image_picker/ios"
+  photo_manager:
+    :path: ".symlinks/plugins/photo_manager/ios"
   url_launcher:
     :path: ".symlinks/plugins/url_launcher/ios"
   url_launcher_macos:
@@ -37,10 +42,11 @@ SPEC CHECKSUMS:
   Flutter: 0e3d915762c693b495b44d77113d4970485de6ec
   flutter_plugin_android_lifecycle: 47de533a02850f070f5696a623995e93eddcdb9b
   image_picker: e3eacd46b94694dde7cf2705955cece853aa1a8f
+  photo_manager: f7c619c2cc8c2adb8d85c63363babac477de9c67
   url_launcher: a1c0cc845906122c4784c542523d8cacbded5626
   url_launcher_macos: fd7894421cd39320dce5f292fc99ea9270b2a313
   url_launcher_web: e5527357f037c87560776e36436bf2b0288b965c
 
-PODFILE CHECKSUM: 3dbe063e9c90a5d7c9e4e76e70a821b9e2c1d271
+PODFILE CHECKSUM: 49ec7d4076524b7e225c38b98147173651ac4b9d
 
-COCOAPODS: 1.7.2
+COCOAPODS: 1.8.4

packages/zefyr/example/ios/Runner.xcodeproj/project.pbxproj

@@ -9,10 +9,6 @@
 /* Begin PBXBuildFile section */
 		1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; };
 		3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; };
-		3B80C3941E831B6300D905FE /* App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; };
-		3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
-		9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; };
-		9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		9740EEB41CF90195004384FC /* Debug.xcconfig in Resources */ = {isa = PBXBuildFile; fileRef = 9740EEB21CF90195004384FC /* Debug.xcconfig */; };
 		9740EEB51CF90195004384FC /* Generated.xcconfig in Resources */ = {isa = PBXBuildFile; fileRef = 9740EEB31CF90195004384FC /* Generated.xcconfig */; };
 		978B8F6F1D3862AE00F588F7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 7AFFD8EE1D35381100E5BB4D /* AppDelegate.m */; };
@@ -30,8 +26,6 @@
 			dstPath = "";
 			dstSubfolderSpec = 10;
 			files = (
-				3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */,
-				9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */,
 			);
 			name = "Embed Frameworks";
 			runOnlyForDeploymentPostprocessing = 0;
@@ -43,14 +37,14 @@
 		1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
 		2BB550984C4EB178783ADADA /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
 		3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = "<group>"; };
-		3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = "<group>"; };
 		7AFFD8ED1D35381100E5BB4D /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
 		7AFFD8EE1D35381100E5BB4D /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
+		8846C66824444D08002B47A3 /* zh-Hans */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = "zh-Hans"; path = "zh-Hans.lproj/Main.strings"; sourceTree = "<group>"; };
+		8846C66924444D08002B47A3 /* zh-Hans */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = "zh-Hans"; path = "zh-Hans.lproj/LaunchScreen.strings"; sourceTree = "<group>"; };
 		892F13FEEEDA93A39D86B7F4 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = "<group>"; };
 		9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = "<group>"; };
-		9740EEBA1CF902C7004384FC /* Flutter.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Flutter.framework; path = Flutter/Flutter.framework; sourceTree = "<group>"; };
 		97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		97C146F21CF9000F007C117D /* main.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
 		97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
@@ -65,8 +59,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */,
-				3B80C3941E831B6300D905FE /* App.framework in Frameworks */,
 				A287E1B0D09CE333E91C72F8 /* libPods-Runner.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -85,9 +77,7 @@
 		9740EEB11CF90186004384FC /* Flutter */ = {
 			isa = PBXGroup;
 			children = (
-				3B80C3931E831B6300D905FE /* App.framework */,
 				3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */,
-				9740EEBA1CF902C7004384FC /* Flutter.framework */,
 				9740EEB21CF90195004384FC /* Debug.xcconfig */,
 				7AFA3C8E1D35360C0083082E /* Release.xcconfig */,
 				9740EEB31CF90195004384FC /* Generated.xcconfig */,
@@ -191,8 +181,10 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
+				"zh-Hans",
 			);
 			mainGroup = 97C146E51CF9000F007C117D;
 			productRefGroup = 97C146EF1CF9000F007C117D /* Products */;
@@ -248,7 +240,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" thin";
+			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin";
 		};
 		497F746AAAAAA284327A4563 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -302,6 +294,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				97C146FB1CF9000F007C117D /* Base */,
+				8846C66824444D08002B47A3 /* zh-Hans */,
 			);
 			name = Main.storyboard;
 			sourceTree = "<group>";
@@ -310,6 +303,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				97C147001CF9000F007C117D /* Base */,
+				8846C66924444D08002B47A3 /* zh-Hans */,
 			);
 			name = LaunchScreen.storyboard;
 			sourceTree = "<group>";

packages/zefyr/example/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>BuildSystemType</key>
-	<string>Original</string>
-</dict>
-</plist>

packages/zefyr/example/ios/Runner/zh-Hans.lproj/LaunchScreen.strings

@@ -0,0 +1 @@
+

packages/zefyr/example/ios/Runner/zh-Hans.lproj/Main.strings

@@ -0,0 +1 @@
+

packages/zefyr/example/pubspec.yaml

@@ -20,10 +20,6 @@ dependencies:
   zefyr:
     path: ../
 
-dependency_overrides:
-  notus:
-    path: ../../notus
-
 dev_dependencies:
   flutter_test:
     sdk: flutter
@@ -55,12 +51,10 @@ flutter:
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
+  fonts:
+    - family: ZefyrFont
+      fonts:
+        - asset: ../lib/fonts/iconfont.ttf
   #   - family: Trajan Pro
   #     fonts:
   #       - asset: fonts/TrajanPro.ttf

packages/zefyr/lib/src/widgets/buttons.dart

@@ -1,10 +1,15 @@
 // Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
+import 'dart:io';
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:notus/notus.dart';
+import 'package:photo_manager/photo_manager.dart';
 import 'package:url_launcher/url_launcher.dart';
+import 'package:zefyr/src/widgets/gallery_item.dart';
 
 import 'scope.dart';
 import 'theme.dart';
@@ -76,18 +81,18 @@ class ZefyrButton extends StatelessWidget {
         action: action,
         icon: _icon,
         size: _iconSize,
-        iconColor: iconColor,
-        color: _getColor(editor, toolbarTheme),
+        iconColor: _getColor(editor, toolbarTheme),
+        color: _getFillColor(action, toolbarTheme),
         onPressed: _getPressedHandler(editor, toolbar),
       );
     } else {
       assert(_text != null);
       var style = _textStyle ?? TextStyle();
-      style = style.copyWith(color: iconColor);
+      style = style.copyWith(color: _getColor(editor, toolbarTheme),);
       return RawZefyrButton(
         action: action,
         child: Text(_text, style: style),
-        color: _getColor(editor, toolbarTheme),
+        color: _getFillColor(action, toolbarTheme),
         onPressed: _getPressedHandler(editor, toolbar),
       );
     }
@@ -104,6 +109,13 @@ class ZefyrButton extends StatelessWidget {
     return null;
   }
 
+  Color _getFillColor(ZefyrToolbarAction action, ToolbarTheme theme) {
+    if (action == ZefyrToolbarAction.text || action == ZefyrToolbarAction.heading || action == ZefyrToolbarAction.hideKeyboard || action == ZefyrToolbarAction.emoji || action == ZefyrToolbarAction.image || action == ZefyrToolbarAction.link) {
+      return theme.color;
+    }
+    return theme.iconFillColor;
+  }
+
   VoidCallback _getPressedHandler(
       ZefyrScope editor, ZefyrToolbarState toolbar) {
     if (onPressed != null) {
@@ -176,12 +188,23 @@ class RawZefyrButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final width = theme.buttonTheme.constraints.minHeight + 4.0;
     final constraints = theme.buttonTheme.constraints.copyWith(
-        minWidth: width, maxHeight: theme.buttonTheme.constraints.minHeight);
-    final radius = BorderRadius.all(Radius.circular(3.0));
+      minWidth: 64, minHeight: 40, maxHeight: 40,
+    );
+    var radius = BorderRadius.all(Radius.circular(0));
+    if (action == ZefyrToolbarAction.headingLevel1 || action == ZefyrToolbarAction.bold || action == ZefyrToolbarAction.numberList) {
+      radius = BorderRadius.horizontal(left: Radius.circular(4));
+    }
+    if (action == ZefyrToolbarAction.headingLevel6 || action == ZefyrToolbarAction.deleteline || action == ZefyrToolbarAction.bulletList) {
+      radius = BorderRadius.horizontal(left: Radius.circular(4));
+    }
+    if (action == ZefyrToolbarAction.quote || action == ZefyrToolbarAction.horizontalRule || action == ZefyrToolbarAction.code) {
+      radius = BorderRadius.all(Radius.circular(4));
+    }
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 6.0),
+      padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 6.0).copyWith(
+        left: action == ZefyrToolbarAction.code || action == ZefyrToolbarAction.quote ? 12.0 : 1.0,
+      ),
       child: RawMaterialButton(
         shape: RoundedRectangleBorder(borderRadius: radius),
         elevation: 0.0,
@@ -221,17 +244,180 @@ class _HeadingButtonState extends State<HeadingButton> {
     toolbar.showOverlay(buildOverlay);
   }
 
+  Widget _buildButtonsView(List<Widget> buttons) {
+    return Container(
+      height: 52,
+      child: ListView(
+        scrollDirection: Axis.horizontal,
+        children: buttons,
+        physics: ClampingScrollPhysics(),
+      ),
+    );
+  }
+
   Widget buildOverlay(BuildContext context) {
+    final theme = ZefyrTheme.of(context).toolbarTheme;
     final toolbar = ZefyrToolbar.of(context);
-    final buttons = Row(
-      children: <Widget>[
-        SizedBox(width: 8.0),
-        toolbar.buildButton(context, ZefyrToolbarAction.headingLevel1),
-        toolbar.buildButton(context, ZefyrToolbarAction.headingLevel2),
-        toolbar.buildButton(context, ZefyrToolbarAction.headingLevel3),
-      ],
+    final headingButtons = <Widget>[
+      toolbar.buildButton(context, ZefyrToolbarAction.headingLevel1),
+      toolbar.buildButton(context, ZefyrToolbarAction.headingLevel2),
+      toolbar.buildButton(context, ZefyrToolbarAction.headingLevel3),
+      toolbar.buildButton(context, ZefyrToolbarAction.headingLevel4),
+      toolbar.buildButton(context, ZefyrToolbarAction.headingLevel5),
+      toolbar.buildButton(context, ZefyrToolbarAction.headingLevel6),
+    ];
+    final textButtons = <Widget>[
+      toolbar.buildButton(context, ZefyrToolbarAction.bold),
+      toolbar.buildButton(context, ZefyrToolbarAction.italic),
+      toolbar.buildButton(context, ZefyrToolbarAction.underline),
+      toolbar.buildButton(context, ZefyrToolbarAction.deleteline),
+      toolbar.buildButton(context, ZefyrToolbarAction.quote),
+    ];
+    final listButtons = <Widget>[
+      toolbar.buildButton(context, ZefyrToolbarAction.numberList),
+      toolbar.buildButton(context, ZefyrToolbarAction.bulletList),
+    ];
+    final otherButtons = <Widget>[
+      toolbar.buildButton(context, ZefyrToolbarAction.horizontalRule),
+      toolbar.buildButton(context, ZefyrToolbarAction.code),
+    ];
+    return Material(
+      color: theme.color,
+          child: Container(
+        decoration: BoxDecoration(
+          border: Border(
+            top: BorderSide(color: theme.dividerColor, width: 1)
+          ),
+        ),
+        child: Column(
+          children: [
+            Container(
+              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
+              child: Column(
+                children: [
+                  _buildButtonsView(headingButtons),
+                  _buildButtonsView(textButtons),
+                  _buildButtonsView(listButtons),
+                  _buildButtonsView(otherButtons),
+                ],
+              ),
+            ),
+            Container(
+              decoration: BoxDecoration(
+                border: Border(
+                  top: BorderSide(color: theme.dividerColor, width: 1)
+                ),
+              ),
+              padding: EdgeInsets.symmetric(vertical: 16),
+              margin: EdgeInsets.symmetric(horizontal: 16),
+              child: Row(
+                children: <Widget>[
+                  Padding(
+                    padding: EdgeInsets.only(right: 12),
+                    child: Text('文字色', style: Theme.of(context).textTheme.caption.copyWith(
+                      color: Theme.of(context).colorScheme.onSurface,
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                    ),),
+                  ),
+                  Expanded(
+                    child: Container(
+                      height: 20,
+                      child: ListView(
+                        scrollDirection: Axis.horizontal,
+                        children: [
+                          Container(
+                            padding: EdgeInsets.all(1),
+                            decoration: ShapeDecoration(
+                              shape: CircleBorder(
+                                side: BorderSide(width: 1, color: theme.toggleColor),
+                              ),
+                            ),
+                            margin: EdgeInsets.symmetric(horizontal: 8),
+                            child: Container(
+                              width: 16,
+                              height: 16,
+                              decoration: ShapeDecoration(
+                                color: Color(0xFFE02020),
+                                shape: CircleBorder(),
+                              ),
+                            ),
+                          ),
+                          Container(
+                            padding: EdgeInsets.all(1),
+                            decoration: ShapeDecoration(
+                              shape: CircleBorder(
+                                side: BorderSide.none,
+                              ),
+                            ),
+                            margin: EdgeInsets.symmetric(horizontal: 8),
+                            child: Container(
+                              width: 16,
+                              height: 16,
+                              decoration: ShapeDecoration(
+                                color: Color(0xFFFA6400),
+                                shape: CircleBorder(),
+                              ),
+                            ),
+                          ),
+                          Container(
+                            padding: EdgeInsets.all(1),
+                            decoration: ShapeDecoration(
+                              shape: CircleBorder(
+                                side: BorderSide.none,
+                              ),
+                            ),
+                            margin: EdgeInsets.symmetric(horizontal: 8),
+                            child: Container(
+                              width: 16,
+                              height: 16,
+                              decoration: ShapeDecoration(
+                                color: Color(0xFF0091FF),
+                                shape: CircleBorder(),
+                              ),
+                            ),
+                          ),
+                        ],
+                        physics: ClampingScrollPhysics(),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
     );
-    return ZefyrToolbarScaffold(body: buttons);
+    // ZefyrToolbarScaffold(body: Container(
+    //   height: 200,
+    //   child: buttons,
+    // ));
+  }
+}
+
+// TODO(lucky1213): image预览这个无效
+extension AssetEntityExtension on AssetEntity {
+  static String idd;
+  static Uint8List _cacheThumbData;
+
+  Future<Uint8List> getThumbData() async {
+      print((idd ?? '') != id);
+      print(id);
+    if ((idd ?? '') != id) {
+      idd = id;
+      _cacheThumbData = await thumbData;
+      return thumbData;
+    } else {
+      print(idd);
+      return _cacheThumbData;
+    }
+    if (_cacheThumbData == null) {
+      _cacheThumbData = await thumbData;
+      return thumbData;
+    } else {
+      return _cacheThumbData;
+    }
   }
 }
 
@@ -247,6 +433,7 @@ class ImageButton extends StatefulWidget {
 }
 
 class _ImageButtonState extends State<ImageButton> {
+  List<AssetEntity> assetList = [];
   @override
   Widget build(BuildContext context) {
     final toolbar = ZefyrToolbar.of(context);
@@ -257,12 +444,24 @@ class _ImageButtonState extends State<ImageButton> {
     );
   }
 
-  void showOverlay() {
+  Future<void> showOverlay() async {
     final toolbar = ZefyrToolbar.of(context);
-    toolbar.showOverlay(buildOverlay);
+    if (Platform.isIOS || Platform.isAndroid) {
+      var result = await PhotoManager.requestPermission();
+      if (result) {
+        var list = await PhotoManager.getAssetPathList(onlyAll: true, type: RequestType.image);
+        assetList = await list[0].assetList;
+        return toolbar.showOverlay(buildOverlay);
+      } else {
+        PhotoManager.openSetting();
+      }
+    } else {
+      print('打开file');
+    }
   }
 
   Widget buildOverlay(BuildContext context) {
+    final theme = ZefyrTheme.of(context).toolbarTheme;
     final toolbar = ZefyrToolbar.of(context);
     final buttons = Row(
       children: <Widget>[
@@ -273,7 +472,147 @@ class _ImageButtonState extends State<ImageButton> {
             onPressed: _pickFromGallery),
       ],
     );
-    return ZefyrToolbarScaffold(body: buttons);
+    return Material(
+      color: theme.color,
+      child: Container(
+        height: 260,
+        child: Column(
+          children: <Widget>[
+            Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                  border: Border(
+                    top: BorderSide(color: theme.dividerColor, width: 1),
+                    bottom: BorderSide(color: theme.dividerColor, width: 1),
+                  ),
+                ),
+                child: Row(
+                  children: [
+                    Container(
+                      width: 58,
+                      child: Column(
+                        children: [
+                          Expanded(
+                            child: FlatButton(
+                              shape: RoundedRectangleBorder(),
+                              color: Color(0xFFF6F6F6),
+                              onPressed: () {
+
+                              }, 
+                              child: Container(
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.center,
+                                  children: [
+                                    Icon(kDefaultButtonIcons[ZefyrToolbarAction.cameraImage], size: 24, color: Color(0xFFBFBFBF),),
+                                    Padding(
+                                      padding: EdgeInsets.only(top: 6),
+                                      child: Text('拍照', style: TextStyle(
+                                        fontSize: 12,
+                                        color: Color(0xFF8C8C8C),
+                                      ),),
+                                    )
+                                  ],
+                                ),
+                              )
+                            ),
+                          ),
+                          Expanded(
+                            child: FlatButton(
+                              shape: RoundedRectangleBorder(),
+                              color: Color(0xFFF6F6F6),
+                              onPressed: () {
+
+                              }, 
+                              child: Container(
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.center,
+                                  children: [
+                                    Icon(kDefaultButtonIcons[ZefyrToolbarAction.galleryImage], size: 24, color: Color(0xFFBFBFBF),),
+                                    Padding(
+                                      padding: EdgeInsets.only(top: 6),
+                                      child: Text('相册', style: TextStyle(
+                                        fontSize: 12,
+                                        color: Color(0xFF8C8C8C),
+                                      ),),
+                                    )
+                                  ],
+                                ),
+                              )
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Expanded(
+                      child: ListView.builder(
+                        key: ValueKey(assetList.length),
+                        scrollDirection: Axis.horizontal,
+                        physics: ClampingScrollPhysics(),
+                        itemCount: assetList.length,
+                        itemExtent: 122,
+                        itemBuilder: (context, index) {
+                          return GalleryItem(key: ObjectKey(assetList[index].id), asset: assetList[index],);
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            Container(
+              height: 50,
+              color: theme.color,
+              padding: EdgeInsets.symmetric(horizontal: 20),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Row(
+                      children: [
+                        SizedBox(
+                          width: 16,
+                          height: 16,
+                          child: Radio<bool>(
+                            value: false, 
+                            groupValue: false, 
+                            onChanged: (bool result) {
+
+                            },
+                          ),
+                        ),
+                        Padding(
+                          padding: EdgeInsets.symmetric(horizontal: 8),
+                          child: Text('原图', style: TextStyle(
+                            color: theme.iconColor,
+                            fontSize: 16
+                          ),),
+                        ),
+                      ],
+                    ),
+                  ),
+                  FlatButton(
+                    padding: EdgeInsets.zero,
+                    color: theme.toggleColor,
+                    shape: StadiumBorder(),
+                    onPressed: () {
+
+                    }, 
+                    child: Container(
+                      height: 30,
+                      alignment: Alignment.center,
+                      padding: EdgeInsets.symmetric(horizontal: 20),
+                      child: Text('上传 (2)', style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 14,
+                      ),),
+                    ),
+                  ),
+                ],
+              ),
+            )
+          ],
+        ),
+      ),
+    );
   }
 
   void _pickFromCamera() async {
@@ -582,4 +921,4 @@ class _LinkView extends StatelessWidget {
     }
     return widget;
   }
-}
+}

packages/zefyr/lib/src/widgets/gallery_item.dart

@@ -0,0 +1,86 @@
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+import 'iconfont.dart';
+import 'theme.dart';
+
+class GalleryItem extends StatefulWidget {
+  const GalleryItem({Key key, this.asset}) : super(key: key);
+  final AssetEntity asset;
+
+  @override
+  _GalleryItemState createState() => _GalleryItemState();
+}
+
+class _GalleryItemState extends State<GalleryItem> {
+  final ValueNotifier<bool> _checked = ValueNotifier<bool>(false);
+  Uint8List _thumbData;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ZefyrTheme.of(context).toolbarTheme;
+    return Stack(
+      children: <Widget>[
+        GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          child: Container(
+            height: 210,
+            margin: EdgeInsets.only(left: 4),
+            child: _thumbData != null
+                ? Image.memory(
+                    _thumbData,
+                    fit: BoxFit.cover,
+                  )
+                : FutureBuilder<Uint8List>(
+                    future: widget.asset.thumbData,
+                    builder: (BuildContext context, snapshot) {
+                      Widget w;
+                      if (snapshot.hasError) {
+                        w = ErrorWidget(snapshot.error);
+                      } else if (snapshot.hasData) {
+                        _thumbData = snapshot.data;
+                        w = Image.memory(
+                          snapshot.data,
+                          fit: BoxFit.cover,
+                        );
+                      } else {
+                        w = Center(
+                          child: Container(
+                            color: Colors.white,
+                            padding: const EdgeInsets.all(20),
+                            child: CircularProgressIndicator(),
+                          ),
+                        );
+                      }
+                      return w;
+                    },
+                  ),
+          ),
+          onTap: () {},
+        ),
+        Positioned(
+          top: 6,
+          right: 6,
+          child: ValueListenableBuilder(
+            valueListenable: _checked,
+            builder: (BuildContext context, bool value, Widget child) {
+              return GestureDetector(
+                behavior: HitTestBehavior.opaque,
+                onTap: () {
+                  _checked.value = !value;
+                },
+                child: Icon(
+                  IconFont.list_update_complete,
+                  size: 24,
+                  color: value ? theme.toggleColor : Colors.white,
+                ),
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

packages/zefyr/lib/src/widgets/iconfont.dart

@@ -0,0 +1,318 @@
+import 'package:flutter/widgets.dart';
+
+class IconFont {
+  IconFont._();
+  static const String _family = 'ZefyrFont';
+  static const IconData global_language = IconData(0xe725, fontFamily: _family);
+	static const IconData light = IconData(0xe723, fontFamily: _family);
+	static const IconData checked = IconData(0xe724, fontFamily: _family);
+  static const IconData largetitle_dropdown = IconData(0xe722, fontFamily: _family);
+	static const IconData global_toast_loading_delete = IconData(0xe721, fontFamily: _family);
+	static const IconData toast_fail = IconData(0xe71e, fontFamily: _family);
+	static const IconData toast_success = IconData(0xe71f, fontFamily: _family);
+	static const IconData toast_loading = IconData(0xe720, fontFamily: _family);
+	static const IconData global_sidebar_profile = IconData(0xe71d, fontFamily: _family);
+	static const IconData lightmode = IconData(0xe71c, fontFamily: _family);
+	static const IconData salary_details_time = IconData(0xe71b, fontFamily: _family);
+	static const IconData share = IconData(0xe719, fontFamily: _family);
+	static const IconData btn_global_videoplay = IconData(0xe6c5, fontFamily: _family);
+	static const IconData im_groupdetails_archive = IconData(0xe6cf, fontFamily: _family);
+	static const IconData im_notice_arrow = IconData(0xe71a, fontFamily: _family);
+	static const IconData minus = IconData(0xe718, fontFamily: _family);
+	static const IconData staffdetails_review = IconData(0xe716, fontFamily: _family);
+	static const IconData staffdetails_salary = IconData(0xe717, fontFamily: _family);
+  static const IconData list_update_fail =
+      IconData(0xe715, fontFamily: _family);
+  static const IconData list_update_complete =
+      IconData(0xe712, fontFamily: _family);
+  static const IconData list_update_pull =
+      IconData(0xe713, fontFamily: _family);
+  static const IconData list_update_loading =
+      IconData(0xe714, fontFamily: _family);
+  static const IconData contact_organization =
+      IconData(0xe70d, fontFamily: _family);
+  static const IconData contact_outsider =
+      IconData(0xe70e, fontFamily: _family);
+  static const IconData contact_new = IconData(0xe70f, fontFamily: _family);
+  static const IconData contact_mygroup = IconData(0xe710, fontFamily: _family);
+  static const IconData contact_robot = IconData(0xe711, fontFamily: _family);
+  static const IconData note_createnote = IconData(0xe70b, fontFamily: _family);
+  static const IconData note_createfolder =
+      IconData(0xe70c, fontFamily: _family);
+  static const IconData rating_full = IconData(0xe708, fontFamily: _family);
+  static const IconData rating_half = IconData(0xe709, fontFamily: _family);
+  static const IconData rating_unfull = IconData(0xe70a, fontFamily: _family);
+  static const IconData note_searchfile_pre =
+      IconData(0xe706, fontFamily: _family);
+  static const IconData note_searchfile_next =
+      IconData(0xe707, fontFamily: _family);
+  static const IconData note_notelist_more =
+      IconData(0xe705, fontFamily: _family);
+  static const IconData note_notelist_folder =
+      IconData(0xe700, fontFamily: _family);
+  static const IconData note_notelist_emptyfolder =
+      IconData(0xe701, fontFamily: _family);
+  static const IconData note_notelist_rubbish =
+      IconData(0xe702, fontFamily: _family);
+  static const IconData note_notelist_note =
+      IconData(0xe703, fontFamily: _family);
+  static const IconData note_notelist_savefolder =
+      IconData(0xe704, fontFamily: _family);
+  static const IconData note_more_comment =
+      IconData(0xe6f7, fontFamily: _family);
+  static const IconData note_more_history =
+      IconData(0xe6f8, fontFamily: _family);
+  static const IconData note_more_info = IconData(0xe6f9, fontFamily: _family);
+  static const IconData note_more_search =
+      IconData(0xe6fa, fontFamily: _family);
+  static const IconData note_more_copy = IconData(0xe6fb, fontFamily: _family);
+  static const IconData note_more_pin = IconData(0xe6fc, fontFamily: _family);
+  static const IconData note_more_delete =
+      IconData(0xe6fd, fontFamily: _family);
+  static const IconData note_more_favorite =
+      IconData(0xe6fe, fontFamily: _family);
+  static const IconData note_more_move = IconData(0xe6ff, fontFamily: _family);
+  static const IconData note_editor_text_h =
+      IconData(0xe6e4, fontFamily: _family);
+  static const IconData note_editor_text_code =
+      IconData(0xe6e5, fontFamily: _family);
+  static const IconData note_editor_text_bold =
+      IconData(0xe6e6, fontFamily: _family);
+  static const IconData note_editor_text_h1 =
+      IconData(0xe6e7, fontFamily: _family);
+  static const IconData note_editor_text_center =
+      IconData(0xe6e8, fontFamily: _family);
+  static const IconData note_editor_text_deleteline =
+      IconData(0xe6e9, fontFamily: _family);
+  static const IconData note_editor_text_left =
+      IconData(0xe6ea, fontFamily: _family);
+  static const IconData note_editor_text_h2 =
+      IconData(0xe6eb, fontFamily: _family);
+  static const IconData note_editor_text_h3 =
+      IconData(0xe6ec, fontFamily: _family);
+  static const IconData note_editor_text_right =
+      IconData(0xe6ed, fontFamily: _family);
+  static const IconData note_editor_text_hr =
+      IconData(0xe6ee, fontFamily: _family);
+  static const IconData note_editor_text_h4 =
+      IconData(0xe6ef, fontFamily: _family);
+  static const IconData note_editor_text_underline =
+      IconData(0xe6f0, fontFamily: _family);
+  static const IconData note_editor_text_ul =
+      IconData(0xe6f1, fontFamily: _family);
+  static const IconData note_editor_text_quote =
+      IconData(0xe6f2, fontFamily: _family);
+  static const IconData note_editor_text_in =
+      IconData(0xe6f3, fontFamily: _family);
+  static const IconData note_editor_text_h5 =
+      IconData(0xe6f4, fontFamily: _family);
+  static const IconData note_editor_text_para =
+      IconData(0xe6f5, fontFamily: _family);
+  static const IconData note_editor_text_ol =
+      IconData(0xe6f6, fontFamily: _family);
+  static const IconData note_editor_unkeyboard =
+      IconData(0xe6dc, fontFamily: _family);
+  static const IconData note_editor_keyboard =
+      IconData(0xe6dd, fontFamily: _family);
+  static const IconData note_editor_redo =
+      IconData(0xe6de, fontFamily: _family);
+  static const IconData note_editor_undo =
+      IconData(0xe6df, fontFamily: _family);
+  static const IconData note_editor_text =
+      IconData(0xe6e0, fontFamily: _family);
+  static const IconData note_editor_image =
+      IconData(0xe6e1, fontFamily: _family);
+  static const IconData note_editor_link =
+      IconData(0xe6e2, fontFamily: _family);
+  static const IconData note_editor_save =
+      IconData(0xe6e3, fontFamily: _family);
+  static const IconData desktop_todolist_warning =
+      IconData(0xe6d8, fontFamily: _family);
+  static const IconData desktop_global_calender =
+      IconData(0xe6d9, fontFamily: _family);
+  static const IconData desktop_global_repeat =
+      IconData(0xe6da, fontFamily: _family);
+  static const IconData desktop_global_important =
+      IconData(0xe6db, fontFamily: _family);
+  static const IconData startpage_jointeam =
+      IconData(0xe6d6, fontFamily: _family);
+  static const IconData startpage_creatteam =
+      IconData(0xe6d7, fontFamily: _family);
+  static const IconData staffdetails_videocall =
+      IconData(0xe6d3, fontFamily: _family);
+  static const IconData staffdetails_voicecall =
+      IconData(0xe6d4, fontFamily: _family);
+  static const IconData staffdetails_sendmessage =
+      IconData(0xe6d5, fontFamily: _family);
+  static const IconData staffdetails_job =
+      IconData(0xe6d0, fontFamily: _family);
+  static const IconData staffdetails_contact =
+      IconData(0xe6d1, fontFamily: _family);
+  static const IconData staffdetails_basic =
+      IconData(0xe6d2, fontFamily: _family);
+  static const IconData selectpeople_delete =
+      IconData(0xe6cf, fontFamily: _family);
+  static const IconData im_comment_empty =
+      IconData(0xe6ce, fontFamily: _family);
+  static const IconData im_filebar_download =
+      IconData(0xe6c8, fontFamily: _family);
+  static const IconData im_filebar_favorite_faved =
+      IconData(0xe6c9, fontFamily: _family);
+  static const IconData im_filebar_forward =
+      IconData(0xe6ca, fontFamily: _family);
+  static const IconData im_filebar_comment =
+      IconData(0xe6cb, fontFamily: _family);
+  static const IconData im_filebar_delete =
+      IconData(0xe6cc, fontFamily: _family);
+  static const IconData im_filebar_favorite_unfav =
+      IconData(0xe6cd, fontFamily: _family);
+  static const IconData im_groupdetails_edit =
+      IconData(0xe6c5, fontFamily: _family);
+  static const IconData im_groupdetails_member =
+      IconData(0xe6c6, fontFamily: _family);
+  static const IconData im_groupdetails_robot =
+      IconData(0xe6c7, fontFamily: _family);
+  static const IconData im_groupdetails_file =
+      IconData(0xe6c1, fontFamily: _family);
+  static const IconData im_groupdetails_history =
+      IconData(0xe6c2, fontFamily: _family);
+  static const IconData im_groupdetails_pin =
+      IconData(0xe6c3, fontFamily: _family);
+  static const IconData im_groupdetails_board =
+      IconData(0xe6c4, fontFamily: _family);
+  static const IconData im_list_nodisturb =
+      IconData(0xe6c0, fontFamily: _family);
+  static const IconData im_videocall_camera =
+      IconData(0xe6ba, fontFamily: _family);
+  static const IconData im_voicecall_sound =
+      IconData(0xe6bb, fontFamily: _family);
+  static const IconData im_videocall_stretch =
+      IconData(0xe6bc, fontFamily: _family);
+  static const IconData im_voicecall_video =
+      IconData(0xe6bd, fontFamily: _family);
+  static const IconData im_videocall_voice =
+      IconData(0xe6be, fontFamily: _family);
+  static const IconData im_voicecall_mute =
+      IconData(0xe6bf, fontFamily: _family);
+  static const IconData im_sidebar_favorite =
+      IconData(0xe6b6, fontFamily: _family);
+  static const IconData im_sidebar_file = IconData(0xe6b7, fontFamily: _family);
+  static const IconData im_sidebar_at = IconData(0xe6b8, fontFamily: _family);
+  static const IconData im_sidebar_notice =
+      IconData(0xe6b9, fontFamily: _family);
+  static const IconData im_dialoge_more_voicecall =
+      IconData(0xe6af, fontFamily: _family);
+  static const IconData im_dialoge_more_takephoto =
+      IconData(0xe6b0, fontFamily: _family);
+  static const IconData im_dialoge_more_album =
+      IconData(0xe6b1, fontFamily: _family);
+  static const IconData im_dialoge_more_note =
+      IconData(0xe6b2, fontFamily: _family);
+  static const IconData im_dialoge_more_task =
+      IconData(0xe6b3, fontFamily: _family);
+  static const IconData im_dialoge_more_videocall =
+      IconData(0xe6b4, fontFamily: _family);
+  static const IconData im_dialoge_more_project =
+      IconData(0xe6b5, fontFamily: _family);
+  static const IconData im_dialogebar_sendmore =
+      IconData(0xe6ac, fontFamily: _family);
+  static const IconData im_dialogebar_sendemoji =
+      IconData(0xe6ad, fontFamily: _family);
+  static const IconData im_dialogebar_sendvoice =
+      IconData(0xe6ae, fontFamily: _family);
+  static const IconData im_dialoge_voicestop =
+      IconData(0xe6a7, fontFamily: _family);
+  static const IconData im_dialoge_voice =
+      IconData(0xe6a8, fontFamily: _family);
+  static const IconData im_dialoge_pin = IconData(0xe6a9, fontFamily: _family);
+  static const IconData im_dialoge_voiceplay =
+      IconData(0xe6aa, fontFamily: _family);
+  static const IconData im_dialoge_record =
+      IconData(0xe6ab, fontFamily: _family);
+  static const IconData global_list_arrow =
+      IconData(0xe6a5, fontFamily: _family);
+  static const IconData global_list_delete =
+      IconData(0xe6a6, fontFamily: _family);
+  static const IconData multiselect_unselected =
+      IconData(0xe6a2, fontFamily: _family);
+  static const IconData multiselect_audio =
+      IconData(0xe6a3, fontFamily: _family);
+  static const IconData multiselect_selected =
+      IconData(0xe6a4, fontFamily: _family);
+  static const IconData login_dropdown = IconData(0xe6a1, fontFamily: _family);
+  static const IconData global_actionsheet_close =
+      IconData(0xe6a0, fontFamily: _family);
+  static const IconData global_sidebar_status =
+      IconData(0xe69f, fontFamily: _family);
+  static const IconData global_sidebar_qrcode =
+      IconData(0xe69a, fontFamily: _family);
+  static const IconData global_sidebar_teamsetting =
+      IconData(0xe69b, fontFamily: _family);
+  static const IconData global_sidebar_account =
+      IconData(0xe69c, fontFamily: _family);
+  static const IconData global_sidebar_noticesetting =
+      IconData(0xe69d, fontFamily: _family);
+  static const IconData global_sidebar_system =
+      IconData(0xe69e, fontFamily: _family);
+  static const IconData global_sidebar_notice =
+      IconData(0xe698, fontFamily: _family);
+  static const IconData global_sidebar_darkmode =
+      IconData(0xe699, fontFamily: _family);
+  static const IconData global_sidebar_lightmode =
+      IconData(0xe71c, fontFamily: _family);
+  static const IconData global_sidebar_add =
+      IconData(0xe697, fontFamily: _family);
+  static const IconData global_share_more =
+      IconData(0xe691, fontFamily: _family);
+  static const IconData global_share_message =
+      IconData(0xe692, fontFamily: _family);
+  static const IconData global_share_qq = IconData(0xe693, fontFamily: _family);
+  static const IconData global_share_copylink =
+      IconData(0xe694, fontFamily: _family);
+  static const IconData global_share_weibo =
+      IconData(0xe695, fontFamily: _family);
+  static const IconData global_share_wechat =
+      IconData(0xe696, fontFamily: _family);
+  static const IconData global_searchbox_delete =
+      IconData(0xe68f, fontFamily: _family);
+  static const IconData global_searchbox_search =
+      IconData(0xe690, fontFamily: _family);
+  static const IconData global_invitecode_refresh =
+      IconData(0xe68c, fontFamily: _family);
+  static const IconData global_invitecode_link =
+      IconData(0xe68d, fontFamily: _family);
+  static const IconData global_invitecode_qrcode =
+      IconData(0xe68e, fontFamily: _family);
+  static const IconData global_invite_qrcode =
+      IconData(0xe688, fontFamily: _family);
+  static const IconData global_invite_code =
+      IconData(0xe689, fontFamily: _family);
+  static const IconData global_invite_wechat =
+      IconData(0xe68a, fontFamily: _family);
+  static const IconData global_invite_qq =
+      IconData(0xe68b, fontFamily: _family);
+  static const IconData global_hoverbtn_add =
+      IconData(0xe686, fontFamily: _family);
+  static const IconData global_hoverbtn_close =
+      IconData(0xe687, fontFamily: _family);
+  static const IconData tabbar_note = IconData(0xe681, fontFamily: _family);
+  static const IconData tabbar_desktop = IconData(0xe682, fontFamily: _family);
+  static const IconData tabbar_explore = IconData(0xe683, fontFamily: _family);
+  static const IconData tabbar_message = IconData(0xe684, fontFamily: _family);
+  static const IconData tabbar_contact = IconData(0xe685, fontFamily: _family);
+  static const IconData topbar_back = IconData(0xe680, fontFamily: _family);
+  static const IconData topbar_closesidebar =
+      IconData(0xe67d, fontFamily: _family);
+  static const IconData topbar_people = IconData(0xe67e, fontFamily: _family);
+  static const IconData topbar_sidebar = IconData(0xe67f, fontFamily: _family);
+  static const IconData topbar_add = IconData(0xe674, fontFamily: _family);
+  static const IconData topbar_more = IconData(0xe675, fontFamily: _family);
+  static const IconData topbar_addrobot = IconData(0xe676, fontFamily: _family);
+  static const IconData topbar_calenderview =
+      IconData(0xe677, fontFamily: _family);
+  static const IconData topbar_invite = IconData(0xe678, fontFamily: _family);
+  static const IconData topbar_share = IconData(0xe679, fontFamily: _family);
+  static const IconData topbar_group = IconData(0xe67a, fontFamily: _family);
+  static const IconData topbar_setting = IconData(0xe67b, fontFamily: _family);
+  static const IconData topbar_close = IconData(0xe67c, fontFamily: _family);
+}

packages/zefyr/lib/src/widgets/theme.dart

@@ -494,32 +494,37 @@ class ToolbarTheme {
   /// Color of buttons in toggled state.
   final Color toggleColor;
 
+  /// Color of button icons.
+  final Color iconFillColor;
+
   /// Color of button icons.
   final Color iconColor;
 
   /// Color of button icons in disabled state.
   final Color disabledIconColor;
+  
+  final Color dividerColor;
 
   /// Creates default theme for editor toolbar.
   factory ToolbarTheme.fallback(BuildContext context) {
     final theme = Theme.of(context);
     return ToolbarTheme._(
-      color: theme.primaryColorBrightness == Brightness.light
-          ? Colors.grey.shade300
-          : Colors.grey.shade800,
-      toggleColor: theme.primaryColorBrightness == Brightness.light
-          ? Colors.grey.shade400
-          : Colors.grey.shade900,
-      iconColor: theme.primaryIconTheme.color,
-      disabledIconColor: theme.disabledColor,
+      color: theme.brightness == Brightness.dark ? Color(0xFF282828) : Color(0xFFFFFFFF),
+      toggleColor: Color(0xFF01AAFF),
+      iconFillColor: theme.brightness == Brightness.dark ? Color(0xFF1F1F1F) : Color(0xFFF2F2F2),
+      iconColor: Color(0xFF595959),
+      disabledIconColor: Color(0xFF8C8C8C),
+      dividerColor: theme.brightness == Brightness.dark ? Color(0xFF3B3B3B) : Color(0xFFF2F2F2),
     );
   }
 
   ToolbarTheme._({
     @required this.color,
     @required this.toggleColor,
+    @required this.iconFillColor,
     @required this.iconColor,
     @required this.disabledIconColor,
+    @required this.dividerColor,
   });
 
   /// Creates a new [ToolbarTheme] where each property from this object has
@@ -527,14 +532,18 @@ class ToolbarTheme {
   ToolbarTheme copyWith({
     Color color,
     Color toggleColor,
+    Color iconFillColor,
     Color iconColor,
     Color disabledIconColor,
+    Color dividerColor,
   }) {
     return ToolbarTheme._(
       color: color ?? this.color,
       toggleColor: toggleColor ?? this.toggleColor,
+      iconFillColor: iconFillColor ?? this.iconFillColor,
       iconColor: iconColor ?? this.iconColor,
       disabledIconColor: disabledIconColor ?? this.disabledIconColor,
+      dividerColor: dividerColor ?? this.dividerColor,
     );
   }
 
@@ -545,8 +554,10 @@ class ToolbarTheme {
     return copyWith(
       color: other.color ?? color,
       toggleColor: other.toggleColor ?? toggleColor,
+      iconFillColor: other.iconFillColor ?? iconFillColor,
       iconColor: other.iconColor ?? iconColor,
       disabledIconColor: other.disabledIconColor ?? disabledIconColor,
+      dividerColor: other.dividerColor ?? dividerColor,
     );
   }
 
@@ -556,11 +567,13 @@ class ToolbarTheme {
     final ToolbarTheme otherTheme = other;
     return (otherTheme.color == color) &&
         (otherTheme.toggleColor == toggleColor) &&
+        (otherTheme.iconFillColor == iconFillColor) &&
         (otherTheme.iconColor == iconColor) &&
         (otherTheme.disabledIconColor == disabledIconColor);
+        (otherTheme.dividerColor == dividerColor);
   }
 
   @override
   int get hashCode =>
-      hashValues(color, toggleColor, iconColor, disabledIconColor);
+      hashValues(color, toggleColor, iconFillColor, iconColor, disabledIconColor, dividerColor);
 }

packages/zefyr/lib/src/widgets/toolbar.dart

@@ -7,6 +7,7 @@ import 'dart:ui' as ui;
 import 'package:flutter/material.dart';
 import 'package:notus/notus.dart';
 
+import 'iconfont.dart';
 import 'buttons.dart';
 import 'scope.dart';
 import 'theme.dart';
@@ -15,14 +16,21 @@ import 'theme.dart';
 enum ZefyrToolbarAction {
   bold,
   italic,
+  underline,
+  deleteline,
   link,
   unlink,
+  emoji,
   clipboardCopy,
   openInBrowser,
   heading,
+  text,
   headingLevel1,
   headingLevel2,
   headingLevel3,
+  headingLevel4,
+  headingLevel5,
+  headingLevel6,
   bulletList,
   numberList,
   code,
@@ -51,6 +59,47 @@ final kZefyrToolbarAttributeActions = <ZefyrToolbarAction, NotusAttributeKey>{
   ZefyrToolbarAction.horizontalRule: NotusAttribute.embed.horizontalRule,
 };
 
+const kDefaultButtonIcons = {
+  ZefyrToolbarAction.bold: IconFont.note_editor_text_bold,
+  ZefyrToolbarAction.italic: IconFont.note_editor_text_in,
+  ZefyrToolbarAction.underline: IconFont.note_editor_text_underline,
+  ZefyrToolbarAction.deleteline: IconFont.note_editor_text_deleteline,
+  ZefyrToolbarAction.quote: IconFont.note_editor_text_quote,
+  ZefyrToolbarAction.numberList: IconFont.note_editor_text_ol,
+  ZefyrToolbarAction.bulletList: IconFont.note_editor_text_ul,
+  ZefyrToolbarAction.link: IconFont.note_editor_link,
+  ZefyrToolbarAction.unlink: Icons.link_off,
+  ZefyrToolbarAction.emoji: IconFont.im_dialogebar_sendemoji,
+  ZefyrToolbarAction.clipboardCopy: Icons.content_copy,
+  ZefyrToolbarAction.openInBrowser: Icons.open_in_new,
+  ZefyrToolbarAction.heading: IconFont.note_editor_text,
+  ZefyrToolbarAction.headingLevel1: IconFont.note_editor_text_h,
+  ZefyrToolbarAction.headingLevel2: IconFont.note_editor_text_h1,
+  ZefyrToolbarAction.headingLevel3: IconFont.note_editor_text_h2,
+  ZefyrToolbarAction.headingLevel4: IconFont.note_editor_text_h3,
+  ZefyrToolbarAction.headingLevel5: IconFont.note_editor_text_h4,
+  ZefyrToolbarAction.headingLevel6: IconFont.note_editor_text_h5,
+  ZefyrToolbarAction.text: IconFont.note_editor_text,
+  ZefyrToolbarAction.code: IconFont.note_editor_text_code,
+  ZefyrToolbarAction.horizontalRule: IconFont.note_editor_text_hr,
+  ZefyrToolbarAction.image: IconFont.note_editor_image,
+  ZefyrToolbarAction.cameraImage: IconFont.im_dialoge_more_takephoto,
+  ZefyrToolbarAction.galleryImage: IconFont.im_dialoge_more_album,
+  ZefyrToolbarAction.hideKeyboard: IconFont.note_editor_keyboard,
+  ZefyrToolbarAction.close: Icons.close,
+  ZefyrToolbarAction.confirm: Icons.check,
+};
+
+const kSpecialIconSizes = {
+  ZefyrToolbarAction.unlink: 20.0,
+  ZefyrToolbarAction.clipboardCopy: 20.0,
+  ZefyrToolbarAction.openInBrowser: 20.0,
+  ZefyrToolbarAction.close: 20.0,
+  ZefyrToolbarAction.confirm: 20.0,
+};
+
+const kDefaultButtonTexts = {};
+
 /// Allows customizing appearance of [ZefyrToolbar].
 abstract class ZefyrToolbarDelegate {
   /// Builds toolbar button for specified [action].
@@ -80,16 +129,21 @@ class ZefyrToolbarScaffold extends StatelessWidget {
     final constraints =
         BoxConstraints.tightFor(height: ZefyrToolbar.kToolbarHeight);
     final children = <Widget>[
-      Expanded(child: body),
+      if (trailing != null)
+        trailing
+      else if (autoImplyTrailing)
+        toolbar.buildButton(context, ZefyrToolbarAction.close)
     ];
 
-    if (trailing != null) {
-      children.add(trailing);
-    } else if (autoImplyTrailing) {
-      children.add(toolbar.buildButton(context, ZefyrToolbarAction.close));
-    }
+    children.add(Expanded(child: body));
+
     return Container(
       constraints: constraints,
+      decoration: BoxDecoration(
+        border: Border(
+          top: BorderSide(color: theme.dividerColor, width: 1)
+        ),
+      ),
       child: Material(color: theme.color, child: Row(children: children)),
     );
   }
@@ -153,7 +207,7 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
     setState(() {
       if (_selection != editor.selection) {
         _selection = editor.selection;
-        closeOverlay();
+        // closeOverlay();
       }
     });
   }
@@ -164,7 +218,9 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
   }
 
   Future<void> showOverlay(WidgetBuilder builder) async {
-    assert(_overlayBuilder == null);
+    if (hasOverlay) {
+      closeOverlay();
+    }
     final completer = Completer<void>();
     setState(() {
       _overlayBuilder = builder;
@@ -218,6 +274,7 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
 
     // Must set unique key for the toolbar to prevent it from reconstructing
     // new state each time we toggle overlay.
+
     final toolbar = ZefyrToolbarScaffold(
       key: _toolbarKey,
       body: ZefyrButtonList(buttons: _buildButtons(context)),
@@ -236,30 +293,26 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
       );
       layers.add(overlay);
     }
-
-    final constraints =
-        BoxConstraints.tightFor(height: ZefyrToolbar.kToolbarHeight);
     return _ZefyrToolbarScope(
       toolbar: this,
-      child: Container(
-        constraints: constraints,
-        child: Stack(children: layers),
+      child: Column(
+        children: layers
       ),
     );
   }
 
   List<Widget> _buildButtons(BuildContext context) {
     final buttons = <Widget>[
-      buildButton(context, ZefyrToolbarAction.bold),
-      buildButton(context, ZefyrToolbarAction.italic),
-      LinkButton(),
       HeadingButton(),
-      buildButton(context, ZefyrToolbarAction.bulletList),
-      buildButton(context, ZefyrToolbarAction.numberList),
-      buildButton(context, ZefyrToolbarAction.quote),
-      buildButton(context, ZefyrToolbarAction.code),
-      buildButton(context, ZefyrToolbarAction.horizontalRule),
+      buildButton(context, ZefyrToolbarAction.emoji),
       if (editor.imageDelegate != null) ImageButton(),
+      LinkButton(),
+      
+      // buildButton(context, ZefyrToolbarAction.bulletList),
+      // buildButton(context, ZefyrToolbarAction.numberList),
+      // buildButton(context, ZefyrToolbarAction.quote),
+      // buildButton(context, ZefyrToolbarAction.code),
+      // buildButton(context, ZefyrToolbarAction.horizontalRule),
     ];
     return buttons;
   }
@@ -306,21 +359,23 @@ class _ZefyrButtonListState extends State<ZefyrButtonList> {
     final rightArrow = _showRightArrow
         ? Icon(Icons.arrow_right, size: 18.0, color: color)
         : null;
-    return Row(
-      children: <Widget>[
-        SizedBox(
-          width: 12.0,
-          height: ZefyrToolbar.kToolbarHeight,
-          child: Container(child: leftArrow, color: theme.color),
-        ),
-        Expanded(child: ClipRect(child: list)),
-        SizedBox(
-          width: 12.0,
-          height: ZefyrToolbar.kToolbarHeight,
-          child: Container(child: rightArrow, color: theme.color),
-        ),
-      ],
-    );
+    return ClipRect(child: list);
+    
+    // Row(
+    //   children: <Widget>[
+    //     SizedBox(
+    //       width: 12.0,
+    //       height: ZefyrToolbar.kToolbarHeight,
+    //       child: Container(child: leftArrow, color: theme.color),
+    //     ),
+    //     Expanded(child: ClipRect(child: list)),
+    //     SizedBox(
+    //       width: 12.0,
+    //       height: ZefyrToolbar.kToolbarHeight,
+    //       child: Container(child: rightArrow, color: theme.color),
+    //     ),
+    //   ],
+    // );
   }
 
   void _handleScroll() {
@@ -334,40 +389,7 @@ class _ZefyrButtonListState extends State<ZefyrButtonList> {
 }
 
 class _DefaultZefyrToolbarDelegate implements ZefyrToolbarDelegate {
-  static const kDefaultButtonIcons = {
-    ZefyrToolbarAction.bold: Icons.format_bold,
-    ZefyrToolbarAction.italic: Icons.format_italic,
-    ZefyrToolbarAction.link: Icons.link,
-    ZefyrToolbarAction.unlink: Icons.link_off,
-    ZefyrToolbarAction.clipboardCopy: Icons.content_copy,
-    ZefyrToolbarAction.openInBrowser: Icons.open_in_new,
-    ZefyrToolbarAction.heading: Icons.format_size,
-    ZefyrToolbarAction.bulletList: Icons.format_list_bulleted,
-    ZefyrToolbarAction.numberList: Icons.format_list_numbered,
-    ZefyrToolbarAction.code: Icons.code,
-    ZefyrToolbarAction.quote: Icons.format_quote,
-    ZefyrToolbarAction.horizontalRule: Icons.remove,
-    ZefyrToolbarAction.image: Icons.photo,
-    ZefyrToolbarAction.cameraImage: Icons.photo_camera,
-    ZefyrToolbarAction.galleryImage: Icons.photo_library,
-    ZefyrToolbarAction.hideKeyboard: Icons.keyboard_hide,
-    ZefyrToolbarAction.close: Icons.close,
-    ZefyrToolbarAction.confirm: Icons.check,
-  };
-
-  static const kSpecialIconSizes = {
-    ZefyrToolbarAction.unlink: 20.0,
-    ZefyrToolbarAction.clipboardCopy: 20.0,
-    ZefyrToolbarAction.openInBrowser: 20.0,
-    ZefyrToolbarAction.close: 20.0,
-    ZefyrToolbarAction.confirm: 20.0,
-  };
-
-  static const kDefaultButtonTexts = {
-    ZefyrToolbarAction.headingLevel1: 'H1',
-    ZefyrToolbarAction.headingLevel2: 'H2',
-    ZefyrToolbarAction.headingLevel3: 'H3',
-  };
+  
 
   @override
   Widget buildButton(BuildContext context, ZefyrToolbarAction action,
@@ -385,8 +407,7 @@ class _DefaultZefyrToolbarDelegate implements ZefyrToolbarDelegate {
     } else {
       final text = kDefaultButtonTexts[action];
       assert(text != null);
-      final style = theme.textTheme.caption
-          .copyWith(fontWeight: FontWeight.bold, fontSize: 14.0);
+      final style = theme.textTheme.caption.copyWith(fontSize: 14.0);
       return ZefyrButton.text(
         action: action,
         text: text,

packages/zefyr/lib/util.dart

@@ -37,4 +37,4 @@ int getPositionDelta(Delta user, Delta actual) {
     }
   }
   return diff;
-}
+}

packages/zefyr/pubspec.yaml

@@ -5,7 +5,7 @@ author: Anatoly Pulyaevskiy <anatoly.pulyaevskiy@gmail.com>
 homepage: https://github.com/memspace/zefyr
 
 environment:
-  sdk: '>=2.2.2 <3.0.0'
+  sdk: '>=2.7.0 <3.0.0'
 
 dependencies:
   flutter:
@@ -13,11 +13,20 @@ dependencies:
   collection: ^1.14.6
   url_launcher: ^5.0.0
   quill_delta: ^1.0.1
-  notus: ^0.1.0
+  notus: 
+    path: ../notus
   meta: ^1.1.0
   quiver_hashcode: ^2.0.0
+  photo_manager: ^0.5.1-dev.4
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
   pedantic: ^1.0.0
+
+flutter:
+  uses-material-design: true
+  fonts:
+    - family: ZefyrFont
+      fonts:
+        - asset: lib/fonts/iconfont.ttf