Skip to content

Commit 0ab9c4c

Browse files
avenwuavenwu
committed
split sample
1 parent bd35324 commit 0ab9c4c

File tree

19 files changed

+444
-213
lines changed

19 files changed

+444
-213
lines changed

‎LICENSE‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
<<<<<<< HEAD
2-
TODO: Add your license here.
3-
=======
41
Apache License
52
Version 2.0, January 2004
63
http://www.apache.org/licenses/
@@ -201,5 +198,4 @@ TODO: Add your license here.
201198
distributed under the License is distributed on an "AS IS" BASIS,
202199
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
203200
See the License for the specific language governing permissions and
204-
limitations under the License.
205-
>>>>>>> de74bf49948e46e132d2fc6ad54a7375a0b880a6
201+
limitations under the License.

‎README-zh.md‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,63 +6,69 @@
66
77
![Screenshot](doc/Screenshot_1571041912.png)
88

9+
**安装Demo** [app-release.apk](doc/app-release.apk)
10+
911
## 使用
1012
执行以下步骤，完成对`Scaffold`的个性化配置：
1113
1. 添加FAB按钮
1214
2. 使FAB居中展示
1315
3. 添加AppBar按钮
1416

15-
### 添加FAB按钮
16-
FAB，实现一个带图片文字的控件。
17-
17+
The `ConvexAppBar` 提供了两个构造器, 利用`ConvexAppBar()`将使用内置的TAB布局，这可以可以简化Tab创建。
18+
1819
```dart
19-
floatingActionButton: GestureDetector(
20-
onTap: () => _onItemTapped(INDEX_PUBLISH),
21-
child: Container(
22-
width: 60,
23-
height: 80,
24-
padding: EdgeInsets.only(bottom: 2),
25-
child: Column(
26-
mainAxisAlignment: MainAxisAlignment.end,
27-
children: <Widget>[
28-
Icon(Icons.add, size: 50, color: convexColor),
29-
Text('Publish', style: TextStyle(color: convexColor)),
30-
],
31-
),
20+
Scaffold(
21+
appBar: AppBar(
22+
title: const Text('Default ConvexAppBar'),
23+
),
24+
body: Center(
25+
child: Text('TAB $_selectedIndex', style: TextStyle(fontSize: 20)),
26+
),
27+
floatingActionButton: ConvexAppBar.fab(
28+
text: 'Publish',
29+
active: _selectedIndex == INDEX_PUBLISH,
30+
activeColor: ACTIVE_COLOR,
31+
color: NORMAL_COLOR,
32+
onTap: () => onTabSelected(INDEX_PUBLISH),
33+
),
34+
floatingActionButtonLocation: ConvexAppBar.centerDocked,
35+
bottomNavigationBar: ConvexAppBar(
36+
items: TAB_ITEMS,
37+
index: _selectedIndex,
38+
activeColor: ACTIVE_COLOR,
39+
color: NORMAL_COLOR,
40+
onTap: onTabSelected,
3241
),
3342
)
3443
```
35-
### 使FAB居中展示
36-
使FAB相对于BottomApp居中展示。
3744

38-
```dart
39-
floatingActionButtonLocation: ExtendLocation.centerDocked,
40-
```
41-
### 添加AppBar按钮
45+
### 自定义TAB
46+
如果默认效果不满足你的需求，尝试用 `ConvexAppBar.builder()` 来自定义整个TAB的排版。
4247

4348
```dart
44-
bottomNavigationBar: ConvexAppBar.builder(
45-
count: 5,
46-
builder: (BuildContext context, int index) {
47-
var data = _navigationItems[index];
48-
var color = _selected == index ? Colors.red : Colors.black;
49-
return GestureDetector(
50-
onTap: () => _onItemTapped(index),
51-
child: Container(
52-
height: 50,
53-
padding: EdgeInsets.only(bottom: 2),
54-
child: Column(
55-
mainAxisAlignment: MainAxisAlignment.end,
56-
children: <Widget>[
57-
Icon(data.icon, color: color),
58-
Text(data.title, style: TextStyle(color: color))
59-
],
60-
)));
61-
}),
49+
Scaffold(
50+
appBar: AppBar(title: const Text('Custom ConvexAppBar')),
51+
body: paletteBody(),
52+
floatingActionButton: GestureDetector(
53+
onTap: () => _onItemTapped(INDEX_PUBLISH),
54+
child: fabContent(convexColor),
55+
),
56+
floatingActionButtonLocation: ConvexAppBar.centerDocked,
57+
bottomNavigationBar: ConvexAppBar.builder(
58+
count: 5,
59+
backgroundColor: _tabBackgroundColor,
60+
builder: (BuildContext context, int index) {
61+
var data = _navigationItems[index];
62+
var color = _currentIndex == index ? Colors.white : Colors.white60;
63+
return GestureDetector(
64+
onTap: () => _onItemTapped(index),
65+
child: tabContent(data, color));
66+
}),
67+
);
6268
```
6369

6470
## 示例
65-
完整细节请参考示例工程[example](example)。
71+
完整代码请参考示例工程[example](example)。
6672

6773
## 帮助
6874

‎README.md‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
![preview](doc/preview.png)
2+
13
# convex_bottom_bar|[中文](README-zh.md)
24

35
This package extends the official BottomAppBar to display a convex tab, example can be preview as bellow.
@@ -6,59 +8,65 @@ This package extends the official BottomAppBar to display a convex tab, example
68
79
![Screenshot](doc/Screenshot_1571041912.png)
810

11+
**Install Demo** [app-release.apk](doc/app-release.apk)
12+
913
## How to use
10-
Follow the steps to setup `Scaffold` with custom attributes:
14+
To use ConvexAppBar, follow these steps to setup `Scaffold`:
1115
1. add FAB with `floatingActionButton`
1216
2. center the FAB with `floatingActionButtonLocation`
1317
3. setup App Bar by `bottomNavigationBar`
1418

15-
### Add FAB
16-
Display the FAB as a Container which contains Icon & Label
17-
19+
The `ConvexAppBar` has to two constructors, the `ConvexAppBar()` will use default layout to simplify the tab creation.
20+
1821
```dart
19-
floatingActionButton: GestureDetector(
20-
onTap: () => _onItemTapped(INDEX_PUBLISH),
21-
child: Container(
22-
width: 60,
23-
height: 80,
24-
padding: EdgeInsets.only(bottom: 2),
25-
child: Column(
26-
mainAxisAlignment: MainAxisAlignment.end,
27-
children: <Widget>[
28-
Icon(Icons.add, size: 50, color: convexColor),
29-
Text('Publish', style: TextStyle(color: convexColor)),
30-
],
31-
),
22+
Scaffold(
23+
appBar: AppBar(
24+
title: const Text('Default ConvexAppBar'),
25+
),
26+
body: Center(
27+
child: Text('TAB $_selectedIndex', style: TextStyle(fontSize: 20)),
28+
),
29+
floatingActionButton: ConvexAppBar.fab(
30+
text: 'Publish',
31+
active: _selectedIndex == INDEX_PUBLISH,
32+
activeColor: ACTIVE_COLOR,
33+
color: NORMAL_COLOR,
34+
onTap: () => onTabSelected(INDEX_PUBLISH),
35+
),
36+
floatingActionButtonLocation: ConvexAppBar.centerDocked,
37+
bottomNavigationBar: ConvexAppBar(
38+
items: TAB_ITEMS,
39+
index: _selectedIndex,
40+
activeColor: ACTIVE_COLOR,
41+
color: NORMAL_COLOR,
42+
onTap: onTabSelected,
3243
),
3344
)
3445
```
35-
### Center the FAB
36-
Make the FAB center in BottomApp
3746

38-
```dart
39-
floatingActionButtonLocation: ExtendLocation.centerDocked,
40-
```
41-
### Setup App Bar
47+
### Custom
48+
If the default style does not match with your situation， try with `ConvexAppBar.builder()`, which allow you to custom nearly all the tab features.
4249

4350
```dart
44-
bottomNavigationBar: ConvexAppBar.builder(
45-
count: 5,
46-
builder: (BuildContext context, int index) {
47-
var data = _navigationItems[index];
48-
var color = _selected == index ? Colors.red : Colors.black;
49-
return GestureDetector(
50-
onTap: () => _onItemTapped(index),
51-
child: Container(
52-
height: 50,
53-
padding: EdgeInsets.only(bottom: 2),
54-
child: Column(
55-
mainAxisAlignment: MainAxisAlignment.end,
56-
children: <Widget>[
57-
Icon(data.icon, color: color),
58-
Text(data.title, style: TextStyle(color: color))
59-
],
60-
)));
61-
}),
51+
Scaffold(
52+
appBar: AppBar(title: const Text('Custom ConvexAppBar')),
53+
body: paletteBody(),
54+
floatingActionButton: GestureDetector(
55+
onTap: () => _onItemTapped(INDEX_PUBLISH),
56+
child: fabContent(convexColor),
57+
),
58+
floatingActionButtonLocation: ConvexAppBar.centerDocked,
59+
bottomNavigationBar: ConvexAppBar.builder(
60+
count: 5,
61+
backgroundColor: _tabBackgroundColor,
62+
builder: (BuildContext context, int index) {
63+
var data = _navigationItems[index];
64+
var color = _currentIndex == index ? Colors.white : Colors.white60;
65+
return GestureDetector(
66+
onTap: () => _onItemTapped(index),
67+
child: tabContent(data, color));
68+
}),
69+
);
6270
```
6371

6472
## Example

‎doc/app-release.apk‎

5.9 MB
Binary file not shown.

‎doc/preview.png‎

258 KB
Loading

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ android {
3838

3939
defaultConfig {
4040
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
41-
applicationId "com.example.bulged_bottom_bar_example"
41+
applicationId "com.hacktons.convex_bottom_bar_example"
4242
minSdkVersion 16
4343
targetSdkVersion 28
4444
versionCode flutterVersionCode.toInteger()

‎example/android/app/src/debug/AndroidManifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2-
package="com.example.bulged_bottom_bar_example">
2+
package="com.hacktons.convex_bottom_bar_example">
33
<!-- Flutter needs it to communicate with the running application
44
to allow setting breakpoints, to provide hot reload, etc.
55
-->

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2-
package="com.example.bulged_bottom_bar_example">
2+
package="com.hacktons.convex_bottom_bar_example">
33

44
<!-- io.flutter.app.FlutterApplication is an android.app.Application that
55
calls FlutterMain.startInitialization(this); in its onCreate method.
@@ -8,7 +8,7 @@
88
FlutterApplication and put your custom class here. -->
99
<application
1010
android:name="io.flutter.app.FlutterApplication"
11-
android:label="bulged_bottom_bar_example"
11+
android:label="AppBarDemo"
1212
android:icon="@mipmap/ic_launcher">
1313
<activity
1414
android:name=".MainActivity"

example/android/app/src/main/kotlin/com/example/bulged_bottom_bar_example/MainActivity.kt renamed to example/android/app/src/main/kotlin/com/hacktons/convex_bottom_bar_example/MainActivity.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.example.bulged_bottom_bar_example
1+
package com.hacktons.convex_bottom_bar_example
22

33
import android.os.Bundle
44

‎example/android/app/src/profile/AndroidManifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2-
package="com.example.bulged_bottom_bar_example">
2+
package="com.hacktons.convex_bottom_bar_example">
33
<!-- Flutter needs it to communicate with the running application
44
to allow setting breakpoints, to provide hot reload, etc.
55
-->

0 commit comments

Comments
 (0)