├── CHANGELOG.md ├── .gitignore ├── publish.sh ├── example ├── README.md ├── .gitignore ├── pubspec.yaml └── lib │ └── main.dart ├── LICENSE ├── pubspec.yaml ├── README_CN.md ├── lib └── ftoast.dart └── README.md /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 2.0.0 2 | - Support null-safety 3 | 4 | ## 1.0.0 5 | 6 | - the first version 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .dart_tool/ 3 | 4 | .packages 5 | .pub/ 6 | 7 | build/ 8 | 9 | .idea/ 10 | 11 | .metadata 12 | 13 | *.iml 14 | 15 | pubspec.lock 16 | 17 | 18 | android/ 19 | ios/ 20 | macos/ 21 | web/ 22 | test/ 23 | ftoast.iml 24 | -------------------------------------------------------------------------------- /publish.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | dart pub publish --dry-run 4 | 5 | echo "" 6 | echo "\033[33m This package will publish after 10s. Please make sure everything is ok. \033[0m" 7 | 8 | count=1 9 | while(($count<10)) 10 | do 11 | echo "$count.." 12 | let "count++" 13 | sleep 1 14 | done 15 | 16 | dart pub publish --server=https://pub.dartlang.org 17 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # ftoast_example 2 | 3 | Demonstrates how to use the ftoast plugin. 4 | 5 | ## Getting Started 6 | 7 | This project is a starting point for a Flutter application. 8 | 9 | A few resources to get you started if this is your first Flutter project: 10 | 11 | - [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab) 12 | - [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook) 13 | 14 | For help getting started with Flutter, view our 15 | [online documentation](https://flutter.dev/docs), which offers tutorials, 16 | samples, guidance on mobile development, and a full API reference. 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2020-present Fliggy Android Team . 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at following link. 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | **/ios/Flutter/.last_build_id 26 | .dart_tool/ 27 | .flutter-plugins 28 | .flutter-plugins-dependencies 29 | .packages 30 | .pub-cache/ 31 | .pub/ 32 | /build/ 33 | 34 | # Web related 35 | lib/generated_plugin_registrant.dart 36 | 37 | # Symbolication related 38 | app.*.symbols 39 | 40 | # Obfuscation related 41 | app.*.map.json 42 | 43 | # Exceptions to above rules. 44 | !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages 45 | 46 | android/ 47 | ios/ 48 | macos/ 49 | web/ 50 | .metadata 51 | pubspec.lock 52 | ftoast_example.iml 53 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: ftoast 2 | description: Help developers create flexible, concise and beautiful Toast. 3 | version: 2.0.0 4 | author: CoorChice 5 | homepage: https://github.com/Fliggy-Mobile/ftoast 6 | 7 | environment: 8 | sdk: ">=2.12.0 <3.0.0" 9 | 10 | dependencies: 11 | flutter: 12 | sdk: flutter 13 | 14 | dev_dependencies: 15 | flutter_test: 16 | sdk: flutter 17 | 18 | # For information on the generic Dart part of this file, see the 19 | # following page: https://dart.dev/tools/pub/pubspec 20 | 21 | # The following section is specific to Flutter. 22 | flutter: 23 | # This section identifies this Flutter project as a plugin project. 24 | # The 'pluginClass' and Android 'package' identifiers should not ordinarily 25 | # be modified. They are used by the tooling to maintain consistency when 26 | # adding or updating assets for this project. 27 | # plugin: 28 | # platforms: 29 | # android: 30 | # package: com.taobao.fapi.ftoast 31 | # pluginClass: FtoastPlugin 32 | # ios: 33 | # pluginClass: FtoastPlugin 34 | # macos: 35 | # pluginClass: FtoastPlugin 36 | 37 | # To add assets to your plugin package, add an assets section, like this: 38 | # assets: 39 | # - images/a_dot_burr.jpeg 40 | # - images/a_dot_ham.jpeg 41 | # 42 | # For details regarding assets in packages, see 43 | # https://flutter.dev/assets-and-images/#from-packages 44 | # 45 | # An image asset can refer to one or more resolution-specific "variants", see 46 | # https://flutter.dev/assets-and-images/#resolution-aware. 47 | 48 | # To add custom fonts to your plugin package, add a fonts section here, 49 | # in this "flutter" section. Each entry in this list should have a 50 | # "family" key with the font family name, and a "fonts" key with a 51 | # list giving the asset and other descriptors for the font. For 52 | # example: 53 | # fonts: 54 | # - family: Schyler 55 | # fonts: 56 | # - asset: fonts/Schyler-Regular.ttf 57 | # - asset: fonts/Schyler-Italic.ttf 58 | # style: italic 59 | # - family: Trajan Pro 60 | # fonts: 61 | # - asset: fonts/TrajanPro.ttf 62 | # - asset: fonts/TrajanPro_Bold.ttf 63 | # weight: 700 64 | # 65 | # For details regarding fonts in packages, see 66 | # https://flutter.dev/custom-fonts/#from-packages 67 | -------------------------------------------------------------------------------- /example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: ftoast_example 2 | description: Demonstrates how to use the ftoast plugin. 3 | 4 | # The following line prevents the package from being accidentally published to 5 | # pub.dev using `pub publish`. This is preferred for private packages. 6 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 7 | 8 | environment: 9 | sdk: ">=2.7.0 <3.0.0" 10 | 11 | dependencies: 12 | flutter: 13 | sdk: flutter 14 | 15 | ftoast: 16 | # When depending on this package from a real application you should use: 17 | # ftoast: ^x.y.z 18 | # See https://dart.dev/tools/pub/dependencies#version-constraints 19 | # The example app is bundled with the plugin so we use a path dependency on 20 | # the parent directory to use the current plugin's version. 21 | path: ../ 22 | 23 | # The following adds the Cupertino Icons font to your application. 24 | # Use with the CupertinoIcons class for iOS style icons. 25 | cupertino_icons: ^0.1.3 26 | # fbutton: ^2.0.0 27 | fsuper: ^2.1.0 28 | fswitch: ^1.1.2 29 | fradio: ^1.0.1 30 | ffloat: ^1.0.1 31 | frefresh: ^1.1.0 32 | fdottedline: ^1.0.0 33 | fsearch: ^2.0.0 34 | 35 | fcommon: 36 | git: 37 | url: 'git@github.com:Fliggy-Mobile/fcommon.git' 38 | ref: 'master' 39 | 40 | dev_dependencies: 41 | flutter_test: 42 | sdk: flutter 43 | 44 | # For information on the generic Dart part of this file, see the 45 | # following page: https://dart.dev/tools/pub/pubspec 46 | 47 | # The following section is specific to Flutter. 48 | flutter: 49 | 50 | # The following line ensures that the Material Icons font is 51 | # included with your application, so that you can use the icons in 52 | # the material Icons class. 53 | uses-material-design: true 54 | 55 | # To add assets to your application, add an assets section, like this: 56 | # assets: 57 | # - images/a_dot_burr.jpeg 58 | # - images/a_dot_ham.jpeg 59 | 60 | # An image asset can refer to one or more resolution-specific "variants", see 61 | # https://flutter.dev/assets-and-images/#resolution-aware. 62 | 63 | # For details regarding adding assets from package dependencies, see 64 | # https://flutter.dev/assets-and-images/#from-packages 65 | 66 | # To add custom fonts to your application, add a fonts section here, 67 | # in this "flutter" section. Each entry in this list should have a 68 | # "family" key with the font family name, and a "fonts" key with a 69 | # list giving the asset and other descriptors for the font. For 70 | # example: 71 | # fonts: 72 | # - family: Schyler 73 | # fonts: 74 | # - asset: fonts/Schyler-Regular.ttf 75 | # - asset: fonts/Schyler-Italic.ttf 76 | # style: italic 77 | # - family: Trajan Pro 78 | # fonts: 79 | # - asset: fonts/TrajanPro.ttf 80 | # - asset: fonts/TrajanPro_Bold.ttf 81 | # weight: 700 82 | # 83 | # For details regarding fonts from package dependencies, 84 | # see https://flutter.dev/custom-fonts/#from-packages 85 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

ftoast

8 | 9 | 10 |
11 | 12 |

简单、精美的 Toast

13 | 14 |

帮助开发者创建灵活的，简洁的，精美的 Toast

15 | 16 |

主理人：纽特(coorchice.cb@alibaba-inc.com)

17 |

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |

46 |

47 | 48 |

49 | 50 | ![](https://gw.alicdn.com/tfs/TB1CdJ5ffzO3e4jSZFxXXaP_FXa-1466-562.png) 51 | 52 | **[English](https://github.com/Fliggy-Mobile/ftoast) | 简体中文** 53 | 54 | > 感觉还不错？请投出您的 **Star** 吧 🥰 ！ 55 | 56 | # ✨ 特性 57 | 58 | - 提供便捷的方式创建 **Toast** 59 | 60 | - 支持主信息、副信息，以及自定义它们的样式 61 | 62 | - 支持灵活多变的图标视图 63 | 64 | - 支持配置边角大小、背景色 65 | 66 | - 支持队列展示 67 | 68 | - 支持自定义 **Toast** 样式 69 | 70 | 71 | # 🛠 使用指南 72 | 73 | 在 FToast 中，开发者只需要通过简单的代码就能轻松创建一个 **Toast** 。 74 | 75 | ```dart 76 | FToast.toast(context, msg: "FToast"); 77 | ``` 78 | 79 | ## ⚙️ 参数 80 | 81 | |参数|类型|必要|默认值|说明| 82 | |---|---|:---:|---|---| 83 | |context|BuildContext|true|null|页面环境| 84 | |toast|Widget|false|null|自定义 toast 视图，会覆盖默认视图| 85 | |msg|String|false|null|主信息| 86 | |msgStyle|TextStyle|false|null|主信息文本样式| 87 | |subMsg|String|false|null|副信息| 88 | |subMsgStyle|TextStyle|false|null|副信息文本样式| 89 | |subMsgSpace|double|false|12.0|副信息与主信息的间距| 90 | |corner|double|false|6.0|边角| 91 | |color|Color|false|Colors.black54|颜色| 92 | |duration|double|false|1800|展示时长| 93 | |padding|EdgeInsets|false|`EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 16.0)`|内间距| 94 | |image|Widget|false|null|图标| 95 | |imageDirection|AxisDirection|false|AxisDirection.up|图标相对文本的位置| 96 | |imageSpace|double|false|9.0|图标与文本的间距| 97 | 98 | ## 🔩 基础使用 99 | 100 | ![](https://gw.alicdn.com/tfs/TB1YG.Mc8FR4u4jSZFPXXanzFXa-365-720.gif) 101 | 102 | ```dart 103 | FToast.toast( 104 | context, 105 | 106 | /// 配置显示时长 107 | /// 108 | /// Configure display duration 109 | duration: 800, 110 | 111 | /// 配置 Msg 112 | /// 113 | /// set Msg 114 | msg: "I'm FToast: ${count++}", 115 | 116 | /// 配置 Msg 样式 117 | /// 118 | /// set Msg style 119 | msgStyle: TextStyle(color: Colors.white), 120 | ) 121 | ``` 122 | 123 | ## 🔆 副信息 124 | 125 | ![](https://gw.alicdn.com/tfs/TB1b0.5NQT2gK0jSZFkXXcIQFXa-365-720.gif) 126 | 127 | ```dart 128 | FToast.toast( 129 | context, 130 | msg: "This is Msg", 131 | 132 | /// 配置 subMsg 133 | /// 134 | /// set subMsg 135 | subMsg: "Welcome to use FToast. This is subMsg!", 136 | 137 | /// 配置 SubMsg 样式 138 | /// 139 | /// set SubMsg style 140 | subMsgStyle: TextStyle(color: Colors.white, fontSize: 13), 141 | ) 142 | ``` 143 | 144 | ## 🔳 图标 145 | 146 | ![](https://gw.alicdn.com/tfs/TB13JPNbZVl614jSZKPXXaGjpXa-365-720.gif) 147 | 148 | ```dart 149 | FToast.toast( 150 | context, 151 | msg: "This is Msg", 152 | subMsg: "Welcome to use FToast. This is subMsg!", 153 | 154 | /// 配置图标 155 | /// 156 | /// set image 157 | image: Icon( 158 | Icons.star, 159 | color: Colors.yellow, 160 | ), 161 | 162 | /// 配置图标相对文本的位置 163 | /// 164 | /// set position of icon relative to text 165 | imageDirection: up, 166 | ) 167 | ``` 168 | 169 | 170 | ## 🔩 自定义样式 171 | 172 | ![](https://gw.alicdn.com/tfs/TB1wlI_NUT1gK0jSZFrXXcNCXXa-365-720.gif) 173 | 174 | ```dart 175 | FToast.toast( 176 | context, 177 | /// 自定义 Toast 样式 178 | /// 179 | /// Custom Toast style 180 | toast: FSuper( 181 | text: "Custom Toast", 182 | style: TextStyle(color: Colors.grey), 183 | padding: EdgeInsets.all(12), 184 | shadowColor: Colors.yellow, 185 | shadowBlur: 80, 186 | ), 187 | ) 188 | ``` 189 | 190 | 191 | # 😃 如何使用？ 192 | 193 | 在项目 `pubspec.yaml` 文件中添加依赖： 194 | 195 | ## 🌐 pub 依赖方式 196 | 197 | ``` 198 | dependencies: 199 | ftoast: ^<版本号> 200 | ``` 201 | 202 | > ⚠️ 注意，请到 [**pub**](https://pub.dev/packages/ftoast) 获取 **FToast** 最新版本号 203 | 204 | ## 🖥 git 依赖方式 205 | 206 | ``` 207 | dependencies: 208 | ftoast: 209 | git: 210 | url: 'git@github.com:Fliggy-Mobile/ftoast.git' 211 | ref: '<分支号 或 tag>' 212 | ``` 213 | 214 | 215 | > ⚠️ 注意，分支号 或 tag 请以 [**FToast**](https://github.com/Fliggy-Mobile/ftoast) 官方项目为准。 216 | 217 | 218 | # 💡 License 219 | 220 | ``` 221 | Copyright 2020-present Fliggy Android Team . 222 | 223 | Licensed under the Apache License, Version 2.0 (the "License"); 224 | you may not use this file except in compliance with the License. 225 | You may obtain a copy of the License at following link. 226 | 227 | http://www.apache.org/licenses/LICENSE-2.0 228 | 229 | Unless required by applicable law or agreed to in writing, software 230 | distributed under the License is distributed on an "AS IS" BASIS, 231 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 232 | See the License for the specific language governing permissions and 233 | limitations under the License. 234 | 235 | ``` 236 | 237 | 238 | ### 感觉还不错？请投出您的 [**Star**](https://github.com/Fliggy-Mobile/ftoast) 吧 🥰 ！ 239 | 240 | 241 | --- 242 | 243 | # 如何运行 Demo 工程？ 244 | 245 | 1.**clone** 工程到本地 246 | 247 | 2.进入工程 `example` 目录，运行以下命令 248 | 249 | ``` 250 | flutter create . 251 | ``` 252 | 253 | 3.运行 `example` 中的 Demo 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /lib/ftoast.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'dart:collection'; 3 | import 'dart:ui'; 4 | 5 | import 'package:flutter/material.dart'; 6 | 7 | /// 帮助开发者创建灵活的，简洁的，精美的 Toast 8 | /// 9 | /// Help developers create flexible, concise and beautiful Toast 10 | /// 11 | /// e.g.: 12 | /// ``` 13 | /// FToast.toast(context, msg: "Hi, FWidget"); 14 | class FToast { 15 | static Queue<_ToastData>? _entryQueue; 16 | static _ToastData? _current; 17 | 18 | /// [context] - 页面环境 19 | /// [toast] - 自定义 toast 视图，会覆盖默认视图 20 | /// [msg] - 主信息 21 | /// [msgStyle] - 主信息文本样式 22 | /// [subMsg] - 副信息 23 | /// [subMsgStyle] - 副信息文本样式 24 | /// [subMsgSpace] - 副信息与主信息的间距 25 | /// [corner] - 边角 26 | /// [color] - 颜色 27 | /// [duration] - 展示时长 28 | /// [padding] - 内间距 29 | /// [image] - 图标 30 | /// [imageDirection] - 图标相对文本的位置 31 | /// [imageSpace] - 图标与文本的间距 32 | /// 33 | /// [context]-page environment 34 | /// [toast]-custom toast view, will override the default view 35 | /// [msg]-main title 36 | /// [msgStyle]-main title text style 37 | /// [subMsg ]-Subtitle 38 | /// [subMsgStyle]-Subtitle text style 39 | /// [subMsgSpace]-Subtitle and main title spacing 40 | /// [corner]-Corner 41 | /// [color]-Color 42 | /// [duration]- Impression duration 43 | /// [padding]-inner spacing 44 | /// [image]-icon 45 | /// [imageDirection]-position of icon relative to text 46 | /// [imageSpace]-distance between icon and text 47 | static toast( 48 | final BuildContext context, { 49 | final Widget? toast, 50 | final String msg = "", 51 | final TextStyle? msgStyle, 52 | final String? subMsg, 53 | final TextStyle? subMsgStyle, 54 | final double subMsgSpace = 12.0, 55 | final double corner = 6.0, 56 | final Color color = Colors.black54, 57 | final int duration = 1800, 58 | final EdgeInsets padding = 59 | const EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 16.0), 60 | final Widget? image, 61 | final AxisDirection imageDirection = AxisDirection.up, 62 | final double imageSpace = 9.0, 63 | }) { 64 | Widget buildToast() { 65 | TextStyle defaultStyle = TextStyle( 66 | color: Colors.white, 67 | fontSize: 16, 68 | height: 1.0, 69 | ); 70 | List children = []; 71 | 72 | if (image != null && imageDirection == AxisDirection.up) { 73 | children.add(image); 74 | children.add(SizedBox(height: imageSpace)); 75 | } 76 | 77 | /// msg 78 | if (image != null && imageDirection == AxisDirection.left) { 79 | children.add(Row( 80 | mainAxisSize: MainAxisSize.min, 81 | crossAxisAlignment: CrossAxisAlignment.center, 82 | children: [ 83 | image, 84 | SizedBox(width: imageSpace), 85 | Text( 86 | msg, 87 | style: msgStyle ?? defaultStyle, 88 | ) 89 | ], 90 | )); 91 | } else if (image != null && imageDirection == AxisDirection.right) { 92 | children.add(Row( 93 | mainAxisSize: MainAxisSize.min, 94 | crossAxisAlignment: CrossAxisAlignment.center, 95 | children: [ 96 | Text( 97 | msg, 98 | style: msgStyle ?? defaultStyle, 99 | ), 100 | SizedBox(width: imageSpace), 101 | image, 102 | ], 103 | )); 104 | } else { 105 | children.add(Text( 106 | msg, 107 | style: msgStyle ?? defaultStyle, 108 | )); 109 | } 110 | 111 | /// subMsg 112 | if (subMsg != null) { 113 | children.add( 114 | SizedBox(height: subMsgSpace), 115 | ); 116 | children.add(Text( 117 | subMsg, 118 | style: subMsgStyle ?? defaultStyle.copyWith(fontSize: 13), 119 | )); 120 | } 121 | if (image != null && imageDirection == AxisDirection.down) { 122 | children.add(SizedBox(height: imageSpace)); 123 | children.add(image); 124 | } 125 | return ConstrainedBox( 126 | constraints: BoxConstraints( 127 | minWidth: 80.0, 128 | minHeight: 38.0, 129 | maxWidth: MediaQueryData.fromWindow(window).size.width - 48.0), 130 | child: Container( 131 | padding: padding, 132 | decoration: BoxDecoration( 133 | color: color, 134 | borderRadius: BorderRadius.all(Radius.circular(corner)), 135 | ), 136 | child: Column( 137 | mainAxisAlignment: MainAxisAlignment.center, 138 | children: children, 139 | ), 140 | ), 141 | ); 142 | } 143 | 144 | if (_entryQueue == null) _entryQueue = Queue(); 145 | OverlayEntry entry = OverlayEntry(builder: (context) { 146 | return IgnorePointer( 147 | child: Material( 148 | color: Colors.transparent, 149 | child: Column( 150 | mainAxisAlignment: MainAxisAlignment.center, 151 | children: [ 152 | toast ?? buildToast(), 153 | ], 154 | ), 155 | ), 156 | ); 157 | }); 158 | _ToastData toastData = _ToastData() 159 | ..context = context 160 | ..entry = entry 161 | ..duration = duration; 162 | _entryQueue?.addLast(toastData); 163 | _show(); 164 | } 165 | 166 | static _show() { 167 | if (_current == null) { 168 | final _ToastData? first = (_entryQueue?.isNotEmpty ?? false) 169 | ? _entryQueue?.removeFirst() 170 | : null; 171 | _current = first; 172 | if (first != null) { 173 | try { 174 | if (first.context != null && 175 | (first.context!.findRenderObject()?.attached ?? false) && 176 | first.entry != null) { 177 | OverlayState? overlayState = Overlay.of(first.context!); 178 | overlayState?.insert(first.entry!); 179 | first.showed = true; 180 | Timer(Duration(milliseconds: first.duration), () { 181 | first.dispose(); 182 | _current = null; 183 | _show(); 184 | }); 185 | } else { 186 | first.dispose(); 187 | _current = null; 188 | } 189 | } catch (e) { 190 | _current = null; 191 | } 192 | } 193 | } 194 | } 195 | } 196 | 197 | class _ToastData { 198 | OverlayEntry? entry; 199 | int duration = 1800; 200 | BuildContext? context; 201 | bool showed = false; 202 | 203 | dispose() { 204 | if (showed) entry?.remove(); 205 | entry = null; 206 | context = null; 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

ftoast

8 | 9 | 10 |
11 | 12 |

Simple, beautiful Toast

13 | 14 |

Help developers create flexible, concise and beautiful Toast

15 | 16 |

Author：Newton(coorchice.cb@alibaba-inc.com)

17 |

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |

46 |

47 | 48 |

49 | 50 | ![](https://gw.alicdn.com/tfs/TB1CdJ5ffzO3e4jSZFxXXaP_FXa-1466-562.png) 51 | 52 | 53 | **English | [简体中文](https://github.com/Fliggy-Mobile/ftoast/blob/master/README_CN.md)** 54 | 55 | > Like it? Please cast your **Star** 🥰 ！ 56 | 57 | # ✨ Features 58 | 59 | - Provide a convenient way to create **Toast** 60 | 61 | - Support primary information, secondary information, and customize their style 62 | 63 | - Support flexible icon view 64 | 65 | - Support to configure corner size and background color 66 | 67 | - Support queue display 68 | 69 | - Support custom **Toast** style 70 | 71 | 72 | # 🛠 Guide 73 | 74 | In FToast, developers can easily create a **Toast** with simple code. 75 | 76 | ```dart 77 | FToast.toast(context, msg: "FToast"); 78 | ``` 79 | 80 | ## ⚙️ Parameters 81 | 82 | |Param|Type|Necessary|Default|desc| 83 | |---|---|:---:|---|---| 84 | |context|BuildContext|true|null|page environment| 85 | |toast|Widget|false|null|custom toast view, will override the default view| 86 | |msg|String|false|null|main title| 87 | |msgStyle|TextStyle|false|null|main title text style| 88 | |subMsg|String|false|null|Subtitle| 89 | |subMsgStyle|TextStyle|false|null|Subtitle text style| 90 | |subMsgSpace|double|false|12.0|Subtitle and main title spacing| 91 | |corner|double|false|6.0|Corner| 92 | |color|Color|false|Colors.black54|Color| 93 | |duration|double|false|1800|Impression duration| 94 | |padding|EdgeInsets|false|`EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 16.0)`|inner spacing| 95 | |image|Widget|false|null|icon| 96 | |imageDirection|AxisDirection|false|AxisDirection.up|position of icon relative to text| 97 | |imageSpace|double|false|9.0|distance between icon and text| 98 | 99 | ## 🔩 Basic 100 | 101 | ![](https://gw.alicdn.com/tfs/TB1YG.Mc8FR4u4jSZFPXXanzFXa-365-720.gif) 102 | 103 | ```dart 104 | FToast.toast( 105 | context, 106 | 107 | /// 配置显示时长 108 | /// 109 | /// Configure display duration 110 | duration: 800, 111 | 112 | /// 配置 Msg 113 | /// 114 | /// set Msg 115 | msg: "I'm FToast: ${count++}", 116 | 117 | /// 配置 Msg 样式 118 | /// 119 | /// set Msg style 120 | msgStyle: TextStyle(color: Colors.white), 121 | ) 122 | ``` 123 | 124 | ## 🔆 SubMsg 125 | 126 | ![](https://gw.alicdn.com/tfs/TB1b0.5NQT2gK0jSZFkXXcIQFXa-365-720.gif) 127 | 128 | ```dart 129 | FToast.toast( 130 | context, 131 | msg: "This is Msg", 132 | 133 | /// 配置 subMsg 134 | /// 135 | /// set subMsg 136 | subMsg: "Welcome to use FToast. This is subMsg!", 137 | 138 | /// 配置 SubMsg 样式 139 | /// 140 | /// set SubMsg style 141 | subMsgStyle: TextStyle(color: Colors.white, fontSize: 13), 142 | ) 143 | ``` 144 | 145 | ## 🔳 Image 146 | 147 | ![](https://gw.alicdn.com/tfs/TB13JPNbZVl614jSZKPXXaGjpXa-365-720.gif) 148 | 149 | ```dart 150 | FToast.toast( 151 | context, 152 | msg: "This is Msg", 153 | subMsg: "Welcome to use FToast. This is subMsg!", 154 | 155 | /// 配置图标 156 | /// 157 | /// set image 158 | image: Icon( 159 | Icons.star, 160 | color: Colors.yellow, 161 | ), 162 | 163 | /// 配置图标相对文本的位置 164 | /// 165 | /// set position of icon relative to text 166 | imageDirection: up, 167 | ) 168 | ``` 169 | 170 | 171 | ## 🔩 Custom style 172 | 173 | ![](https://gw.alicdn.com/tfs/TB1wlI_NUT1gK0jSZFrXXcNCXXa-365-720.gif) 174 | 175 | ```dart 176 | FToast.toast( 177 | context, 178 | /// 自定义 Toast 样式 179 | /// 180 | /// Custom Toast style 181 | toast: FSuper( 182 | text: "Custom Toast", 183 | style: TextStyle(color: Colors.grey), 184 | padding: EdgeInsets.all(12), 185 | shadowColor: Colors.yellow, 186 | shadowBlur: 80, 187 | ), 188 | ) 189 | ``` 190 | 191 | 192 | # 😃 How to use？ 193 | 194 | Add dependencies in the project `pubspec.yaml` file: 195 | 196 | ## 🌐 pub dependency 197 | 198 | ``` 199 | dependencies: 200 | ftoast: ^ 201 | ``` 202 | 203 | > ⚠️ Attention，please go to [**pub**] (https://pub.dev/packages/ftoast) to get the latest version number of **FToast** 204 | 205 | ## 🖥 Git dependency 206 | 207 | ``` 208 | dependencies: 209 | ftoast: 210 | git: 211 | url: 'git@github.com:Fliggy-Mobile/ftoast.git' 212 | ref: '' 213 | ``` 214 | 215 | > ⚠️ Attention，please refer to [**FToast**] (https://github.com/Fliggy-Mobile/ftoast) official project for branch number or tag. 216 | 217 | 218 | # 💡 License 219 | 220 | ``` 221 | Copyright 2020-present Fliggy Android Team . 222 | 223 | Licensed under the Apache License, Version 2.0 (the "License"); 224 | you may not use this file except in compliance with the License. 225 | You may obtain a copy of the License at following link. 226 | 227 | http://www.apache.org/licenses/LICENSE-2.0 228 | 229 | Unless required by applicable law or agreed to in writing, software 230 | distributed under the License is distributed on an "AS IS" BASIS, 231 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 232 | See the License for the specific language governing permissions and 233 | limitations under the License. 234 | 235 | ``` 236 | 237 | 238 | ### Like it? Please cast your [**Star**](https://github.com/Fliggy-Mobile/ftoast) 🥰 ！ 239 | 240 | 241 | --- 242 | 243 | # How to run Demo project? 244 | 245 | 1. **clone** project to local 246 | 247 | 2. Enter the project `example` directory and run the following command 248 | 249 | ``` 250 | flutter create . 251 | ``` 252 | 253 | 3. Run the demo in `example` 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /example/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'dart:ui'; 2 | 3 | import 'package:fcommon/fcommon.dart'; 4 | import 'package:flutter/cupertino.dart'; 5 | import 'package:flutter/material.dart'; 6 | import 'package:flutter/rendering.dart'; 7 | import 'package:fsuper/fsuper.dart'; 8 | import 'package:ftoast/ftoast.dart'; 9 | import 'package:fcontrol/fdefine.dart'; 10 | 11 | void main() { 12 | runApp(MyApp()); 13 | } 14 | 15 | class MyApp extends StatefulWidget { 16 | @override 17 | _MyAppState createState() => _MyAppState(); 18 | } 19 | 20 | class _MyAppState extends State { 21 | @override 22 | void initState() { 23 | super.initState(); 24 | } 25 | 26 | int count = 0; 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return MaterialApp( 31 | home: Builder(builder: (context) { 32 | var appBar = AppBar( 33 | backgroundColor: mainBackgroundColor, 34 | title: const Text( 35 | 'FToast', 36 | style: TextStyle(color: mainTextTitleColor), 37 | ), 38 | centerTitle: true, 39 | ); 40 | var shadowTop = MediaQueryData.fromWindow(window).size.height - 41 | appBar.preferredSize.height - 42 | 20; 43 | return Scaffold( 44 | backgroundColor: mainBackgroundColor, 45 | appBar: appBar, 46 | body: Stack( 47 | children: [ 48 | SingleChildScrollView( 49 | child: Container( 50 | child: Column( 51 | mainAxisSize: MainAxisSize.min, 52 | crossAxisAlignment: CrossAxisAlignment.center, 53 | children: [ 54 | buildTitle("FToast"), 55 | buildMiddleMargin(), 56 | buildMiddleMargin(), 57 | buildMiddleMargin(), 58 | 59 | /// FToast 60 | buildFToast(context), 61 | const SizedBox(height: 500), 62 | buildTitle("SubMsg"), 63 | buildMiddleMargin(), 64 | buildMiddleMargin(), 65 | buildMiddleMargin(), 66 | 67 | /// SubMsg 68 | buildSubMsg(context), 69 | const SizedBox(height: 500), 70 | 71 | buildTitle("Image"), 72 | buildMiddleMargin(), 73 | buildMiddleMargin(), 74 | buildMiddleMargin(), 75 | 76 | /// Image 77 | buildImage(context), 78 | const SizedBox(height: 500), 79 | 80 | buildTitle("Custom Toast"), 81 | buildMiddleMargin(), 82 | buildMiddleMargin(), 83 | buildMiddleMargin(), 84 | 85 | /// Custom Toast 86 | buildCustomToast(context), 87 | const SizedBox(height: 500), 88 | 89 | buildBiggestMargin(), 90 | buildBiggestMargin(), 91 | ], 92 | ), 93 | ), 94 | ), 95 | FSuper( 96 | width: double.infinity, 97 | height: 26.0, 98 | margin: EdgeInsets.only(top: shadowTop), 99 | gradient: LinearGradient( 100 | begin: Alignment.topCenter, 101 | end: Alignment.bottomCenter, 102 | colors: [ 103 | Colors.transparent, 104 | Colors.black26, 105 | ]), 106 | ), 107 | ], 108 | ), 109 | ); 110 | }), 111 | ); 112 | } 113 | 114 | Widget buildFToast(BuildContext context) { 115 | return FSuper( 116 | text: "Click to show FToast", 117 | style: TextStyle(color: mainTextTitleColor), 118 | backgroundColor: mainBackgroundColor, 119 | padding: EdgeInsets.all(12.0), 120 | onClick: () { 121 | FToast.toast( 122 | context, 123 | 124 | /// 配置显示时长 125 | /// 126 | /// Configure display duration 127 | duration: 800, 128 | 129 | /// 配置 Msg 130 | /// 131 | /// set Msg 132 | msg: "I'm FToast: ${count++}", 133 | 134 | /// 配置 Msg 样式 135 | /// 136 | /// set Msg style 137 | msgStyle: TextStyle(color: Colors.white), 138 | ); 139 | }, 140 | corner: FCorner.all(20), 141 | isSupportNeumorphism: true, 142 | ); 143 | } 144 | 145 | Widget buildSubMsg(BuildContext context) { 146 | return FSuper( 147 | text: "Click to show FToast", 148 | style: TextStyle(color: mainTextTitleColor), 149 | backgroundColor: mainBackgroundColor, 150 | padding: EdgeInsets.all(12.0), 151 | onClick: () { 152 | FToast.toast( 153 | context, 154 | msg: "This is Msg", 155 | 156 | /// 配置 subMsg 157 | /// 158 | /// set subMsg 159 | subMsg: "Welcome to use FToast. This is subMsg!", 160 | 161 | /// 配置 SubMsg 样式 162 | /// 163 | /// set SubMsg style 164 | subMsgStyle: TextStyle(color: Colors.white, fontSize: 13), 165 | ); 166 | }, 167 | corner: FCorner.all(20), 168 | isSupportNeumorphism: true, 169 | ); 170 | } 171 | 172 | AxisDirection up = AxisDirection.up; 173 | 174 | Widget buildImage(BuildContext context) { 175 | return FSuper( 176 | text: "Click to show FToast", 177 | style: TextStyle(color: mainTextTitleColor), 178 | backgroundColor: mainBackgroundColor, 179 | padding: EdgeInsets.all(12.0), 180 | onClick: () { 181 | switch (up) { 182 | case AxisDirection.up: 183 | up = AxisDirection.left; 184 | break; 185 | case AxisDirection.left: 186 | up = AxisDirection.right; 187 | break; 188 | case AxisDirection.right: 189 | up = AxisDirection.down; 190 | break; 191 | case AxisDirection.down: 192 | up = AxisDirection.up; 193 | break; 194 | } 195 | FToast.toast( 196 | context, 197 | msg: "This is Msg", 198 | subMsg: "Welcome to use FToast. This is subMsg!", 199 | 200 | /// 配置图标 201 | /// 202 | /// set image 203 | image: Icon( 204 | Icons.star, 205 | color: Colors.yellow, 206 | ), 207 | 208 | /// 配置图标相对文本的位置 209 | /// 210 | /// set position of icon relative to text 211 | imageDirection: up, 212 | ); 213 | }, 214 | corner: FCorner.all(20), 215 | isSupportNeumorphism: true, 216 | ); 217 | } 218 | 219 | Widget buildCustomToast(BuildContext context) { 220 | return FSuper( 221 | text: "Click to show FToast", 222 | style: TextStyle(color: mainTextTitleColor), 223 | backgroundColor: mainBackgroundColor, 224 | padding: EdgeInsets.all(12.0), 225 | onClick: () { 226 | FToast.toast( 227 | context, 228 | 229 | /// 自定义 Toast 样式 230 | /// 231 | /// Custom Toast style 232 | toast: FSuper( 233 | text: "Custom Toast", 234 | style: TextStyle(color: Colors.grey), 235 | padding: EdgeInsets.all(12), 236 | shadowColor: Colors.yellow, 237 | shadowBlur: 80, 238 | ), 239 | ); 240 | }, 241 | corner: FCorner.all(20), 242 | isSupportNeumorphism: true, 243 | ); 244 | } 245 | } 246 | 247 | class Page_2 extends StatefulWidget { 248 | @override 249 | _Page_2State createState() => _Page_2State(); 250 | } 251 | 252 | class _Page_2State extends State { 253 | @override 254 | Widget build(BuildContext context) { 255 | return Container( 256 | alignment: Alignment.center, 257 | color: mainBackgroundColor, 258 | child: FSuper( 259 | width: 100, 260 | height: 80, 261 | backgroundColor: mainBackgroundColor, 262 | onClick: () { 263 | FToast.toast(context, msg: "Hi"); 264 | Navigator.pop(context); 265 | }, 266 | isSupportNeumorphism: true, 267 | ), 268 | ); 269 | } 270 | } 271 | --------------------------------------------------------------------------------