Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6c36370

Browse files
committed
Initial commit
0 parents commit 6c36370

39 files changed

+1951
-0
lines changed

‎.gitignore

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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+
# Visual Studio Code related
19+
.vscode/
20+
21+
# Flutter/Dart/Pub related
22+
**/doc/api/
23+
.dart_tool/
24+
.flutter-plugins
25+
.packages
26+
.pub-cache/
27+
.pub/
28+
/build/
29+
30+
# Android related
31+
**/android/**/gradle-wrapper.jar
32+
**/android/.gradle
33+
**/android/captures/
34+
**/android/gradlew
35+
**/android/gradlew.bat
36+
**/android/local.properties
37+
**/android/**/GeneratedPluginRegistrant.java
38+
39+
# iOS/XCode related
40+
**/ios/**/*.mode1v3
41+
**/ios/**/*.mode2v3
42+
**/ios/**/*.moved-aside
43+
**/ios/**/*.pbxuser
44+
**/ios/**/*.perspectivev3
45+
**/ios/**/*sync/
46+
**/ios/**/.sconsign.dblite
47+
**/ios/**/.tags*
48+
**/ios/**/.vagrant/
49+
**/ios/**/DerivedData/
50+
**/ios/**/Icon?
51+
**/ios/**/Pods/
52+
**/ios/**/.symlinks/
53+
**/ios/**/profile
54+
**/ios/**/xcuserdata
55+
**/ios/.generated/
56+
**/ios/Flutter/App.framework
57+
**/ios/Flutter/Flutter.framework
58+
**/ios/Flutter/Generated.xcconfig
59+
**/ios/Flutter/app.flx
60+
**/ios/Flutter/app.zip
61+
**/ios/Flutter/flutter_assets/
62+
**/ios/ServiceDefinitions.json
63+
**/ios/Runner/GeneratedPluginRegistrant.*
64+
65+
# Exceptions to above rules.
66+
!**/ios/**/default.mode1v3
67+
!**/ios/**/default.mode2v3
68+
!**/ios/**/default.pbxuser
69+
!**/ios/**/default.perspectivev3
70+
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages

‎README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
3+
# flutter_web_challenge_googlemaps_web
4+
5+
Use Flutter_web💪 to implement the UI challenge of Google Maps on [uplabs](https://www.uplabs.com/posts/google-maps-redesign-919dd0d6-0883-4378-b5b2-f77e36adb6b5) .
6+
7+
[中文版本](README_CN.md)
8+
9+
> Designer : [Joydeep Sengupta](https://www.uplabs.com/joydeeproni)
10+
>
11+
> Uplabs : <https://www.uplabs.com/posts/google-maps-redesign-919dd0d6-0883-4378-b5b2-f77e36adb6b5>
12+
>
13+
> Developer : [ditclear](https://github.com/ditclear)
14+
15+
#### Run
16+
17+
First, make sure the relevant environment is installed, please refer to [Flutter-web] (https://github.com/flutter/flutter_web).
18+
19+
Then clone
20+
21+
> git clone https://github.com/flutter-ui-challenges/flutter_web_challenge_googlemaps.git
22+
23+
You can open the project with Android Studio, IntelliJ or Visual Studio Code and run the `main.dart` file.
24+
25+
### Challenge
26+
27+
![](ui/all.png)
28+
29+
30+
31+
![](ui/attachment.gif)
32+
33+
34+
35+
![](ui/preview.gif)
36+
37+
38+
39+
#### 不用客气,buy Me a Lunch ~
40+
41+
| Alipay | WeChatPay |
42+
| :----------------------------------------------------------: | :----------------------------------------------------------: |
43+
| ![](https://camo.githubusercontent.com/fbaa3ecc28af039c8e6011ddf473e51d2a08c8d2/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f333732323639352d666664653137306665633933316561652e706e673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f333430) | ![](https://camo.githubusercontent.com/ade43488617a69c72d5be1841fd4d0934689a3b0/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f333732323639352d316238323761353465633237346535392e706e673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f333430) |
44+
45+
### License
46+
47+
```
48+
Copyright 2019 ditclear
49+
50+
Licensed under the Apache License, Version 2.0 (the "License");
51+
you may not use this file except in compliance with the License.
52+
You may obtain a copy of the License at
53+
54+
http://www.apache.org/licenses/LICENSE-2.0
55+
56+
Unless required by applicable law or agreed to in writing, software
57+
distributed under the License is distributed on an "AS IS" BASIS,
58+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
59+
See the License for the specific language governing permissions and
60+
limitations under the License.
61+
```
62+
63+
64+
65+
66+
67+
68+
69+
70+
71+
72+

‎README_CN.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
#
2+
3+
# flutter_challenge_googlemaps
4+
5+
使用Flutter_web实现[uplabs](https://www.uplabs.com/posts/google-maps-redesign-919dd0d6-0883-4378-b5b2-f77e36adb6b5)上Google Maps的UI挑战
6+
7+
> 设计师 : [Joydeep Sengupta](https://www.uplabs.com/joydeeproni)
8+
>
9+
> Uplabs : <https://www.uplabs.com/posts/google-maps-redesign-919dd0d6-0883-4378-b5b2-f77e36adb6b5>
10+
>
11+
> 开发者 : [ditclear](https://github.com/ditclear)
12+
13+
#### 体验一下
14+
15+
首先,确保安装了相关的环境,请参考[Flutter-web](https://github.com/flutter/flutter_web).
16+
17+
然后克隆
18+
19+
> git clone https://github.com/flutter-ui-challenges/flutter_web_challenge_googlemaps.git
20+
21+
你可以使用Android Studio 、IntelliJ或者Visual Studio Code打开项目,然后运行`main.dart`文件
22+
23+
#### 效果图
24+
25+
![](ui/all.png)
26+
27+
![](ui/attachment.gif)
28+
29+
![](ui/preview.gif)
30+
31+
32+
33+
#### 不用客气,buy Me a Lunch ~
34+
35+
| Alipay | WeChatPay |
36+
| :----------------------------------------------------------: | :----------------------------------------------------------: |
37+
| ![](https://camo.githubusercontent.com/fbaa3ecc28af039c8e6011ddf473e51d2a08c8d2/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f333732323639352d666664653137306665633933316561652e706e673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f333430) | ![](https://camo.githubusercontent.com/ade43488617a69c72d5be1841fd4d0934689a3b0/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f333732323639352d316238323761353465633237346535392e706e673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f333430) |
38+
39+
### License
40+
41+
```
42+
Copyright 2019 ditclear
43+
44+
Licensed under the Apache License, Version 2.0 (the "License");
45+
you may not use this file except in compliance with the License.
46+
You may obtain a copy of the License at
47+
48+
http://www.apache.org/licenses/LICENSE-2.0
49+
50+
Unless required by applicable law or agreed to in writing, software
51+
distributed under the License is distributed on an "AS IS" BASIS,
52+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
53+
See the License for the specific language governing permissions and
54+
limitations under the License.
55+
```
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+

‎lib/components/components.dart

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export 'explore_content_widget.dart';
2+
export 'explore_widget.dart';
3+
export 'map_button.dart';
4+
export 'menu_widget.dart';
5+
export 'recent_search_widget.dart';
6+
export 'search_back_widget.dart';
7+
export 'search_menu_widget.dart';
8+
export 'search_widget.dart';
Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import 'package:flutter_web/material.dart';
2+
import 'package:flutter_web_challenge_googlemaps/helper/ui_helper.dart';
3+
4+
class ExploreContentWidget extends StatelessWidget {
5+
final double currentExplorePercent;
6+
final placeName = const ["Authentic\nrestaurant", "Famous\nmonuments", "Weekend\ngetaways"];
7+
const ExploreContentWidget({Key key, this.currentExplorePercent}) : super(key: key);
8+
9+
@override
10+
Widget build(BuildContext context) {
11+
if (currentExplorePercent != 0) {
12+
return Positioned(
13+
top: realH(standardHeight + (162 - standardHeight) * currentExplorePercent),
14+
width: screenWidth,
15+
child: Container(
16+
height: screenHeight,
17+
child: ListView(
18+
physics: const BouncingScrollPhysics(),
19+
shrinkWrap: true,
20+
children: <Widget>[
21+
Opacity(
22+
opacity: currentExplorePercent,
23+
child: Row(
24+
mainAxisSize: MainAxisSize.max,
25+
children: <Widget>[
26+
Expanded(
27+
child: Transform.translate(
28+
offset: Offset(screenWidth / 3 * (1 - currentExplorePercent),
29+
screenWidth / 3 / 2 * (1 - currentExplorePercent)),
30+
child: Image.asset(
31+
"icon_1.png",
32+
width: realH(133),
33+
height: realH(133),
34+
),
35+
),
36+
),
37+
Expanded(
38+
child: Image.asset(
39+
"icon_2.png",
40+
width: realH(133),
41+
height: realH(133),
42+
),
43+
),
44+
Expanded(
45+
child: Transform.translate(
46+
offset: Offset(-screenWidth / 3 * (1 - currentExplorePercent),
47+
screenWidth / 3 / 2 * (1 - currentExplorePercent)),
48+
child: Image.asset(
49+
"icon_3.png",
50+
width: realH(133),
51+
height: realH(133),
52+
),
53+
),
54+
)
55+
],
56+
),
57+
),
58+
Transform.translate(
59+
offset: Offset(0, realH(23 + 380 * (1 - currentExplorePercent))),
60+
child: Opacity(
61+
opacity: currentExplorePercent,
62+
child: Container(
63+
width: screenWidth,
64+
height: realH(172 + (172 * 4 * (1 - currentExplorePercent))),
65+
child: ListView(
66+
physics: const BouncingScrollPhysics(),
67+
scrollDirection: Axis.horizontal,
68+
children: <Widget>[
69+
Padding(
70+
padding: EdgeInsets.only(left: realW(22)),
71+
),
72+
buildListItem(0, "Authentic\nrestaurant"),
73+
buildListItem(1, "Famous\nmonuments"),
74+
buildListItem(2, "Weekend\ngetaways"),
75+
buildListItem(3, "Authentic\nrestaurant"),
76+
buildListItem(4, "Famous\nmonuments"),
77+
buildListItem(5, "Weekend\ngetaways"),
78+
],
79+
),
80+
))),
81+
Transform.translate(
82+
offset: Offset(0, realH(58 + 570 * (1 - currentExplorePercent))),
83+
child: Opacity(
84+
opacity: currentExplorePercent,
85+
child: Padding(
86+
padding: EdgeInsets.symmetric(horizontal: realW(22)),
87+
child: Column(
88+
crossAxisAlignment: CrossAxisAlignment.start,
89+
mainAxisSize: MainAxisSize.max,
90+
children: <Widget>[
91+
Padding(
92+
padding: EdgeInsets.only(left: realW(22)),
93+
child: Text("EVENTS",
94+
style:
95+
const TextStyle(color: Colors.white54, fontSize: 13, fontWeight: FontWeight.bold)),
96+
),
97+
Stack(
98+
children: <Widget>[
99+
Image.asset(
100+
"dj.png",
101+
),
102+
Positioned(
103+
bottom: realH(26),
104+
left: realW(24),
105+
child: Text(
106+
"Marshmello Live in Concert",
107+
style: TextStyle(color: Colors.white, fontSize: realW(16)),
108+
))
109+
],
110+
),
111+
Transform.translate(
112+
offset: Offset(0, realH(30 - 30 * (currentExplorePercent - 0.75) * 4)),
113+
child: Row(
114+
children: <Widget>[
115+
Expanded(
116+
child: Image.asset("banner_4.png"),
117+
),
118+
Expanded(
119+
child: Image.asset("banner_5.png"),
120+
),
121+
],
122+
),
123+
)
124+
],
125+
),
126+
),
127+
)),
128+
Padding(
129+
padding: EdgeInsets.only(bottom: realH(262)),
130+
)
131+
],
132+
),
133+
),
134+
);
135+
} else {
136+
return const Padding(
137+
padding: const EdgeInsets.all(0),
138+
);
139+
}
140+
}
141+
142+
buildListItem(int index, String name) {
143+
return Transform.translate(
144+
offset: Offset(0, index * realH(127) * (1 - currentExplorePercent)),
145+
child: Column(
146+
mainAxisSize: MainAxisSize.min,
147+
children: <Widget>[
148+
Image.asset(
149+
"banner_${index % 3 + 1}.png",
150+
width: realH(127),
151+
height: realH(127),
152+
),
153+
Text(
154+
placeName[index % 3],
155+
style: TextStyle(color: Colors.white, fontSize: realH(16)),
156+
textAlign: TextAlign.center,
157+
)
158+
],
159+
),
160+
);
161+
}
162+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /