Merge branch 'develop' into dev/yisheng

* develop:
  文案描述
  feat(CupertinoTabView demo):
  Update README-en.md
  feat(add English intro from Allsimon pull request):
  feat(add CupertinoTabScaffold):
  feat(add CupertinoTabBar demo):
  Update index.dart
  add license
  +LICENSE
  translate: translate the README to En locale
  update(version) and readme.md
This commit is contained in:
ryan
2019-01-24 18:48:53 +08:00
13 changed files with 502 additions and 5 deletions

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
Copyright (c) 2018-present Alibaba Inc.
Permission is granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS",
WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE

80
README-en.md Normal file
View File

@ -0,0 +1,80 @@
## Flutter Go
> Help developers get started quickly Flutter **In-house testing, the 1.0 official version will be released on February 20.**
## Download URL
Android download URL:
<img src="https://img.alicdn.com/tfs/TB1q1GVB4naK1RjSZFtXXbC2VXa-195-198.png" width="200px">
Iphone download URL:
No
### Background
#### What is Flutter?
On June 21, 2018, Google released the first release preview of Flutter as a new responsive, cross-platform, high-performance mobile development framework launched by Google. Flutter is a cross-platform mobile UI framework designed to help developers develop high-performance, high-fidelity Android and iOS apps using a single set of code.
The advantages of Flutter mainly include:
- Cross-platform
- Open source
- Hot Reload, responsive framework, and its rich controls and development tools
- Flexible interface design and control combinations
- High quality user experience with a portable GPU-accelerated rendering engine and high-performance ARM code runtime
#### The origin of Flutter Go
- Flutter has too little learning material, which is relatively difficult for students who are not good at English.
- The official website document example is not sound enough, not intuitive enough
- The usage of each widget is different, and the properties are numerous. To run a demo of a widget, it is often necessary to look through various materials everywhere.
#### Advantages of Flutter Go
- Detailed idiom widgets up to **130+**
- Companion Demo Explain the widget's general usage
- Centralized integration of widget cases, an APP to get all the usage of common widgets
- Continuous iteration chasing new official version
### App Preview
<img src="https://img.alicdn.com/tfs/TB1oeicBhjaK1RjSZFAXXbdLFXa-345-717.gif" width=200> <img src="https://img.alicdn.com/tfs/TB1WJNuBmzqK1RjSZPcXXbTepXa-345-717.gif" width=200> <img src="https://img.alicdn.com/tfs/TB13Xh3BkvoK1RjSZFNXXcxMVXa-345-717.gif" width=200> <img src="https://img.alicdn.com/tfs/TB1MtdSBjDpK1RjSZFrXXa78VXa-345-717.gif" width=200>
### Core Team
<table>
<tbody>
<tr>
<td align="center" width="80" valign="top">
<img height="80" width="80" src="https://github.com/minghe.png?s=128">
<br>
<a href="https://github.com/minghe">@minghe</a>
</td>
<td align="center" width="80" valign="top">
<img height="80" width="80" src="https://github.com/ryan730.png?s=128">
<br>
<a href="https://github.com/ryan730">@ryan730</a>
</td>
<td align="center" width="80" valign="top">
<img height="80" width="80" src="https://github.com/Nealyang.png?s=128">
<br>
<a href="https://github.com/Nealyang">@Nealyang</a>
</td>
<td align="center" width="80" valign="top">
<img height="80" width="80" src="https://github.com/hanxu317317.png?s=128">
<br>
<a href="https://github.com/hanxu317317">@hanxu317317</a>
</td>
<td align="center" width="80" valign="top">
<img height="80" width="80" src="https://github.com/DeckeDeng.png?s=128">
<br>
<a href="https://github.com/DeckeDeng">@DeckeDeng</a>
</td>
</tr>
</tbody>
</table>
Powered by [Alibaba Auction Front-end Team](https://github.com/alibaba-paimai-frontend)<img src="https://img.alicdn.com/tfs/TB1foEhAMHqK1RjSZJnXXbNLpXa-166-166.png" width= 20 height=20>

View File

@ -1,3 +1,4 @@
Language: [English](https://github.com/alibaba/flutter-go/blob/master/README-en.md) | [中文简体](https://github.com/alibaba/flutter-go/blob/master/README.md)
## Flutter Go
> 帮助开发者快速上手 Flutter **内部测试中1.0 正式版将于 2月 20日 发布。**
@ -7,7 +8,7 @@
android下载地址:
<img src="https://img.alicdn.com/tfs/TB18ud1BmzqK1RjSZFjXXblCFXa-380-384.png" width="200px">
<img src="https://img.alicdn.com/tfs/TB1q1GVB4naK1RjSZFtXXbC2VXa-195-198.png" width="200px">
iphone下载地址:
暂无
@ -33,7 +34,7 @@ flutter优点主要包括
#### Flutter Go 的优势
- 详解常用widget多达 **130+**
- 详解常用widget多达 **140+**
- 配套 Demo 详解 widget 常规用法
- 集中整合 widget 案例,一个 APP 搞定所有常用 widget 的用法
- 持续迭代 ‘追新’ 官方版本

View File

@ -35,7 +35,7 @@ class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'AlertDialog',
title: 'AboutDialog',
codeUrl: 'components/Dialog/AboutDialog/demo.dart',
contentList: [
_Text0,

View File

@ -0,0 +1,53 @@
/**
* Created with Android Studio.
* User: 三帆
* Date: 20/01/2019
* Time: 22:28
* email: sanfan.hx@alibaba-inc.com
* tartget: CupertinoTabBar
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoTabBarDemo extends StatefulWidget {
_Demo createState() => _Demo();
}
class _Demo extends State<CupertinoTabBarDemo> {
int index = 0;
changeIndex(int _index) {
this.setState(() {
index = _index;
});
}
Widget build(BuildContext context) {
return Container(
height: 500,
child: Scaffold(
appBar: AppBar(title: const Text('CupertinoTabBarDemo')),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: Center(
child: Text('CupertinoTabBarDemo in bottom'),
),
bottomNavigationBar: CupertinoTabBar(
backgroundColor: Color.fromRGBO(244, 244, 244, 0.5),
currentIndex: index,
onTap: (i) {
this.changeIndex(i);
},
items: [
BottomNavigationBarItem(
title: Text("1"),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text("2"),
icon: Icon(Icons.delete)
)],
)
),
);
}
}

View File

@ -0,0 +1,44 @@
import 'package:flutter/material.dart';
import 'package:flutter_go/common/widget_demo.dart';
import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart';
import 'demo.dart';
const Text0 = '''
### **简介**
> ios风格下底部导航组件.
通过BottomNavigationBarItem列表,在屏幕底部展示多个小组件, 默认下选择第一个小组件;
### **基本用法**
这个组件, 没有任何内部状态, 使用时需要开发者自己去监听**onTap**方法, 主动为组件的属性**currentIndex**赋值
在官网上有这么一段文字:
> If the given backgroundColor's opacity is not 1.0 (which is the case by default), it will produce a blurring effect to the content behind it.
本人试了很多次. 也没有发现这个Blur Effect是怎么触发的, 如果有人了解, 欢迎提PR.
''';
class Demo extends StatefulWidget {
static const String routeName =
'/element/themes/Cupertino/CupertinoTabBar';
@override
State<StatefulWidget> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'CupertinoTabBar',
codeUrl: '/themes/Cupertino/CupertinoTabBar/demo.dart',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoTabBar-class.html',
contentList: [
Text0,
CupertinoTabBarDemo()
],
);
}
}

View File

@ -0,0 +1,79 @@
/**
* Created with Android Studio.
* User: 三帆
* Date: 20/01/2019
* Time: 22:28
* email: sanfan.hx@alibaba-inc.com
* tartget: CupertinoTabBar
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoTabScaffoldDemo extends StatefulWidget {
_Demo createState() => _Demo();
}
class _Demo extends State<CupertinoTabScaffoldDemo> {
int index = 0;
changeIndex(int _index) {
this.setState(() {
index = _index;
});
}
Widget build(BuildContext context) {
return SizedBox(
height: 500,
child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(
title: Text("1"),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text("2"),
icon: Icon(Icons.add),
)
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: Text('Next page = $index'),
onPressed: () {
Navigator.of(context).push(
CupertinoPageRoute<void>(
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 2 of tab $index'),
),
child: Center(
child: CupertinoButton(
child: const Text('Back'),
onPressed: () { Navigator.of(context).pop(); },
),
),
);
},
),
);
},
),
),
);
},
);
},
),
);
}
}

View File

@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
import 'package:flutter_go/common/widget_demo.dart';
import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart';
import 'demo.dart';
const Text0 = '''
### **简介**
> 实现iOS应用程序的选项卡式的根布局与结构。
一个在底部放置标签栏,标签栏之间或后面放置内容的脚手架.
这个脚手架, tabBar组件与tabBuilder组件是必须配置的。如果你为该脚手架配置的tabBar组件是 **CupertinoTabBar**的话. 它会自动监听**CupertinoTabBar**底部的切换事件, 去动态切换主体显示的内容.
选项卡的内容是使用**tabBuilder**选项卡生成器生成的。TabBuilder必须能够生成tabbar中组件数组长度相同数量的组件。不活动的选项卡将被移到后台并禁用其动画。
使用cupertinobview作为每个选项卡的内容以支持具有并行导航状态和历史记录的选项卡。
通过BottomNavigationBarItem列表,在屏幕底部展示多个小组件, 默认下选择第一个小组件;
### **基本用法**
''';
class Demo extends StatefulWidget {
static const String routeName =
'/element/themes/Cupertino/CupertinoTabScaffold';
@override
State<StatefulWidget> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'CupertinoTabScaffold',
codeUrl: '/themes/Cupertino/CupertinoTabScaffold/demo.dart',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoTabScaffold-class.html',
contentList: [
Text0,
CupertinoTabScaffoldDemo()
],
);
}
}

View File

@ -0,0 +1,94 @@
/**
* Created with Android Studio.
* User: 三帆
* Date: 20/01/2019
* Time: 22:28
* email: sanfan.hx@alibaba-inc.com
* tartget: CupertinoTabBar
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoTabScaffoldDemo extends StatefulWidget {
_Demo createState() => _Demo();
}
class _Demo extends State<CupertinoTabScaffoldDemo> {
int index = 0;
changeIndex(int _index) {
this.setState(() {
index = _index;
});
}
Widget build(BuildContext context) {
return SizedBox(
height: 500,
child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(
title: Text("A"),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text("B"),
icon: Icon(Icons.add),
)
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
routes: {
'/': (context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tabView $index'),
),
child: Center(
child: Text('CupertinoTabView /'),
),
);
},
'/home': (context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tabView $index'),
),
child: Center(
child: Text('CupertinoTabView home'),
),
);
}
},
builder: (BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Page 1 of tabView $index'),
),
child: Column(
children: <Widget>[
SizedBox(height: 100),
CupertinoButton(
child: Text('Next page is self home page'),
onPressed: () {
Navigator.of(context).pushNamed('/home');
},
),
CupertinoButton(
child: Text('Next page is home home page'),
onPressed: () {
Navigator.of(context, rootNavigator: true).pushNamed('/home');
},
)
],
)
);
},
);
},
),
);
}
}

View File

@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
import 'package:flutter_go/common/widget_demo.dart';
import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart';
import 'demo.dart';
const Text0 = '''
### **简介**
> 具有自己的**Navigator**状态与历史记录的选项卡视图组件.
在使用时需要注意,该组件有自己的路由体系, 有自己的导航系统, 并且他自身内部的导航系统并不与任何父母元素共享
### **基本用法**
关于它自身的路由体系, 有以下几点需要注意几点.
- 在它的根路由映射(**'/'**), 当它有 **builder** 属性的时候, 指向**build**的界面, 非得使用**router**中定义的根目录
- 当组件未设定**builder**时, 在他的路由表 **router** 中, 一定要指定 **'/'** 跟路由, 不然会产生错误.
- 当指定 **onGenerateRoute** 属性时, 它应该返回一个回空有效的route.
- 如果所有的配置都未命中, 则会命中 **onUnknownRoute** 属性. 这与MaterialApp一致相同
如果你想从 **CupertinoTabView** 的路由体系, 跳转到外层的路由中, 您需要在跳转时调用 **Navigator**,并设定 **rootNavigator** 参数
```
Navigator.of(context, rootNavigator: true)
```
### **基本实例**
''';
class Demo extends StatefulWidget {
static const String routeName =
'/element/themes/Cupertino/CupertinoTabView';
@override
State<StatefulWidget> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'CupertinoTabView',
codeUrl: '/themes/Cupertino/CupertinoTabView/demo.dart',
docUrl: 'https://docs.flutter.io/flutter/cupertino/CupertinoTabView-class.html',
contentList: [
Text0,
CupertinoTabScaffoldDemo()
],
);
}
}

View File

@ -18,6 +18,10 @@ import './CupertinoSegmentedControl/index.dart' as CupertinoSegmentedControl;
import './CupertinoSliverNavigationBar/index.dart' as CupertinoSliverNavigationBar;
import './CupertinoSwitch/index.dart' as CupertinoSwitch;
import './CupertinoTabBar/index.dart' as CupertinoTabBar;
import './CupertinoTabScaffold/index.dart' as CupertinoTabScaffold;
import './CupertinoTabView/index.dart' as CupertinoTabView;
List<WidgetPoint> widgetPoints = [
WidgetPoint(
name: 'CupertinoPopupSurface',
@ -94,5 +98,20 @@ List<WidgetPoint> widgetPoints = [
routerName: CupertinoSwitch.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoSwitch.Demo(),
),
WidgetPoint(
name: 'CupertinoTabBar',
routerName: CupertinoTabBar.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabBar.Demo(),
),
WidgetPoint(
name: 'CupertinoTabScaffold',
routerName: CupertinoTabScaffold.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabScaffold.Demo(),
),
WidgetPoint(
name: 'CupertinoTabView',
routerName: CupertinoTabView.Demo.routeName,
buildRouter: (BuildContext context) => CupertinoTabView.Demo(),
),
];

View File

@ -7,7 +7,7 @@ description: flutter_go
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# Read more about versioning at semver.org.
version: 0.0.3
version: 0.0.4
environment:
sdk: ">=2.0.0-dev.68.0 <3.0.0"
@ -169,6 +169,8 @@ flutter:
- lib/widgets/themes/Cupertino/CupertinoSlider/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSegmentedControl/demo.dart
- lib/widgets/themes/Cupertino/CupertinoSwitch/demo.dart
- lib/widgets/themes/Cupertino/CupertinoTabBar/demo.dart
- lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart
- assets/app.db
- assets/images/
- assets/fonts/