Skip to content

Commit 18e9b10

Browse files
FilledStacksFilledStacks
committed
Removed platform specific files to reduce size
0 parents  commit 18e9b10

File tree

1,754 files changed

+115038
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,754 files changed

+115038
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
032-flutter-web-part1/.firebase/hosting.YnVpbGRcd2Vi.cache

‎001-tik_tok_ui/final/.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

‎001-tik_tok_ui/final/.metadata

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# This file tracks properties of this Flutter project.
2+
# Used by Flutter tool to assess capabilities and perform upgrades etc.
3+
#
4+
# This file should be version controlled and should not be manually edited.
5+
6+
version:
7+
revision: 740fb2a8bb6d43a475ce76f7fe3e5fc10bbe24ff
8+
channel: master
9+
10+
project_type: app

‎001-tik_tok_ui/final/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Final
2+
3+
This is the completed tutorial code for building the Tik Tok UI. You can see both [Part1](https://medium.com/filledstacks/breaking-down-tiktoks-ui-using-flutter-8489fe4ad944) and [Part2](https://medium.com/filledstacks/building-tiktoks-ui-in-flutter-part-2-build-the-small-parts-42fb2089d605) on the [FilledStacks Publication](https://medium.com/filledstacks)

‎001-tik_tok_ui/final/assets/fonts/TikTokIcons.ttf

2.91 KB
Binary file not shown.

‎001-tik_tok_ui/final/lib/home.dart

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import 'package:flutter/material.dart';
2+
3+
import 'package:tik_tok_ui/widgets/video_description.dart';
4+
import 'package:tik_tok_ui/widgets/actions_toolbar.dart';
5+
import 'package:tik_tok_ui/widgets/bottom_toolbar.dart';
6+
7+
class Home extends StatelessWidget {
8+
Widget get topSection => Container(
9+
height: 100.0,
10+
padding: EdgeInsets.only(bottom: 15.0),
11+
alignment: Alignment(0.0, 1.0),
12+
child: Row(
13+
crossAxisAlignment: CrossAxisAlignment.end,
14+
mainAxisSize: MainAxisSize.min,
15+
children: <Widget>[
16+
Text('Following'),
17+
Container(
18+
width: 15.0,
19+
),
20+
Text('For you',
21+
style: TextStyle(
22+
fontSize: 17.0, fontWeight: FontWeight.bold))
23+
]),
24+
);
25+
26+
Widget get middleSection => Expanded(
27+
child: Row(
28+
mainAxisSize: MainAxisSize.max,
29+
crossAxisAlignment: CrossAxisAlignment.end,
30+
children: <Widget>[VideoDescription(), ActionsToolbar()]));
31+
32+
@override
33+
Widget build(BuildContext context) {
34+
return Scaffold(
35+
backgroundColor: Colors.black,
36+
body: Column(
37+
children: <Widget>[
38+
// Top section
39+
topSection,
40+
41+
// Middle expanded
42+
middleSection,
43+
44+
// Bottom Section
45+
BottomToolbar(),
46+
],
47+
),
48+
);
49+
}
50+
}

‎001-tik_tok_ui/final/lib/home_final_singlefile.dart

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:cached_network_image/cached_network_image.dart';
3+
import 'package:tik_tok_ui/tik_tok_icons_icons.dart';
4+
5+
class HomeSingleFile extends StatelessWidget {
6+
static const double NavigationIconSize = 20.0;
7+
static const double ActionWidgetSize = 60.0;
8+
static const double ActionIconSize = 35.0;
9+
static const double ShareActionIconSize = 25.0;
10+
static const double ProfileImageSize = 50.0;
11+
static const double ActionIconGap = 12.0;
12+
static const double FollowActionIconSize = 25.0;
13+
static const double CreateButtonWidth = 38.0;
14+
15+
Widget get followingContainer => Container(
16+
height: 100.0,
17+
padding: EdgeInsets.only(bottom: 15.0),
18+
alignment: Alignment(0.0, 1.0),
19+
child: Row(
20+
crossAxisAlignment: CrossAxisAlignment.end,
21+
mainAxisSize: MainAxisSize.min,
22+
children: <Widget>[
23+
Text('Following'),
24+
Container(
25+
width: 15.0,
26+
),
27+
Text('For you',
28+
style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold))
29+
]),
30+
);
31+
32+
Widget get videoDescription => Expanded(
33+
child: Padding(
34+
padding: const EdgeInsets.only(left: 20.0),
35+
child: Column(
36+
mainAxisSize: MainAxisSize.min,
37+
crossAxisAlignment: CrossAxisAlignment.start,
38+
children: <Widget>[
39+
Text(
40+
'@firstjonny',
41+
style: TextStyle(fontWeight: FontWeight.bold),
42+
),
43+
Container(
44+
height: 10.0,
45+
),
46+
Text('Video title and some other stuff'),
47+
Container(
48+
height: 10.0,
49+
),
50+
Row(children: [
51+
Icon(Icons.music_note, color: Colors.white, size: 15.0),
52+
Container(
53+
width: 10.0,
54+
),
55+
Text('Artist name', style: TextStyle(fontSize: 12.0)),
56+
Container(
57+
width: 10.0,
58+
),
59+
Text('Song name', style: TextStyle(fontSize: 12.0))
60+
]),
61+
Container(
62+
height: 12.0,
63+
),
64+
]),
65+
));
66+
67+
Widget get actionsToolbar => Container(
68+
width: 100.0,
69+
child: Column(
70+
mainAxisSize: MainAxisSize.min,
71+
children: <Widget>[
72+
_getProfileVideoAction(),
73+
_getVideoAction(title: '3.2m', icon: TikTokIcons.heart),
74+
_getVideoAction(title: '16.4k', icon: TikTokIcons.chat_bubble),
75+
_getVideoAction(
76+
title: 'Share', icon: TikTokIcons.reply, isShare: true),
77+
_getMusicPlayerAction()
78+
],
79+
),
80+
);
81+
82+
LinearGradient get musicGradient => LinearGradient(colors: [
83+
Colors.grey[800],
84+
Colors.grey[900],
85+
Colors.grey[900],
86+
Colors.grey[800]
87+
], stops: [
88+
0.0,
89+
0.4,
90+
0.6,
91+
1.0
92+
], begin: Alignment.bottomLeft, end: Alignment.topRight);
93+
94+
Widget _getMusicPlayerAction() {
95+
return Container(
96+
margin: EdgeInsets.only(top: 10.0),
97+
width: ActionWidgetSize,
98+
height: ActionWidgetSize,
99+
child: Column(children: [
100+
Container(
101+
padding: EdgeInsets.all(11.0),
102+
height: ProfileImageSize,
103+
width: ProfileImageSize,
104+
decoration: BoxDecoration(
105+
gradient: musicGradient,
106+
borderRadius: BorderRadius.circular(ProfileImageSize / 2)),
107+
child: CachedNetworkImage(
108+
imageUrl:
109+
"https://secure.gravatar.com/avatar/ef4a9338dca42372f15427cdb4595ef7",
110+
placeholder: (context, url) => new CircularProgressIndicator(),
111+
errorWidget: (context, url, error) => new Icon(Icons.error),
112+
),
113+
),
114+
]));
115+
}
116+
117+
Widget get centerSection => Expanded(
118+
child: Row(
119+
mainAxisSize: MainAxisSize.max,
120+
crossAxisAlignment: CrossAxisAlignment.end,
121+
children: <Widget>[videoDescription, actionsToolbar]));
122+
123+
Widget get customCreateIcon => Container(
124+
width: 45.0,
125+
height: 27.0,
126+
child: Stack(children: [
127+
Container(
128+
margin: EdgeInsets.only(left: 10.0),
129+
width: CreateButtonWidth,
130+
decoration: BoxDecoration(
131+
color: Color.fromARGB(255, 250, 45, 108),
132+
borderRadius: BorderRadius.circular(7.0))),
133+
Container(
134+
margin: EdgeInsets.only(right: 10.0),
135+
width: CreateButtonWidth,
136+
decoration: BoxDecoration(
137+
color: Color.fromARGB(255, 32, 211, 234),
138+
borderRadius: BorderRadius.circular(7.0))),
139+
Center(
140+
child: Container(
141+
height: double.infinity,
142+
width: CreateButtonWidth,
143+
decoration: BoxDecoration(
144+
color: Colors.white, borderRadius: BorderRadius.circular(7.0)),
145+
child: Icon(
146+
Icons.add,
147+
size: 20.0,
148+
),
149+
)),
150+
]));
151+
152+
Widget get navigationBar => Padding(
153+
padding: EdgeInsets.only(top: 15.0),
154+
child: Row(
155+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
156+
children: [
157+
Icon(TikTokIcons.home, color: Colors.white, size: NavigationIconSize),
158+
Icon(TikTokIcons.search,
159+
color: Colors.white, size: NavigationIconSize),
160+
customCreateIcon,
161+
Icon(TikTokIcons.messages,
162+
color: Colors.white, size: NavigationIconSize),
163+
Icon(TikTokIcons.profile,
164+
color: Colors.white, size: NavigationIconSize)
165+
],
166+
));
167+
168+
@override
169+
Widget build(BuildContext context) {
170+
return Scaffold(
171+
body: Container(
172+
color: Colors.black,
173+
child: Column(
174+
children: <Widget>[
175+
followingContainer,
176+
centerSection,
177+
Opacity(
178+
opacity: 0.1,
179+
child: Container(height: 1.0, color: Colors.grey[300])),
180+
navigationBar,
181+
],
182+
),
183+
),
184+
);
185+
}
186+
187+
Widget _getVideoAction({String title, IconData icon, bool isShare = false}) {
188+
return Container(
189+
margin: EdgeInsets.only(top: 15.0),
190+
width: ActionWidgetSize,
191+
height: ActionWidgetSize,
192+
child: Column(children: [
193+
Icon(icon,
194+
size: isShare ? ShareActionIconSize : ActionIconSize,
195+
color: Colors.grey[300]),
196+
Padding(
197+
padding: EdgeInsets.only(top: isShare ? 5.0 : 2.0),
198+
child:
199+
Text(title, style: TextStyle(fontSize: isShare ? 10.0 : 12.0)),
200+
)
201+
]));
202+
}
203+
204+
Widget _getProfileVideoAction({String pictureUrl}) {
205+
return Stack(children: [
206+
Container(
207+
margin: EdgeInsets.only(top: 10.0),
208+
width: ActionWidgetSize,
209+
height: ActionWidgetSize,
210+
child: Column(children: [
211+
Container(
212+
padding: EdgeInsets.all(1.0),
213+
height: ProfileImageSize,
214+
width: ProfileImageSize,
215+
decoration: BoxDecoration(
216+
color: Colors.white,
217+
borderRadius: BorderRadius.circular(ProfileImageSize / 2)),
218+
child: CachedNetworkImage(
219+
imageUrl:
220+
"https://secure.gravatar.com/avatar/ef4a9338dca42372f15427cdb4595ef7",
221+
placeholder: (context, url) => new CircularProgressIndicator(),
222+
errorWidget: (context, url, error) => new Icon(Icons.error),
223+
),
224+
),
225+
])),
226+
Positioned(
227+
width: 15.0,
228+
height: 15.0,
229+
bottom: 5,
230+
left: ((ActionWidgetSize / 2) - (15 / 2)),
231+
child: Container(
232+
decoration: BoxDecoration(
233+
color: Colors.white, borderRadius: BorderRadius.circular(15.0)),
234+
)),
235+
Positioned(
236+
bottom: 0,
237+
left: ((ActionWidgetSize / 2) - (FollowActionIconSize / 2)),
238+
child: Icon(Icons.add_circle,
239+
color: Color.fromARGB(255, 255, 43, 84),
240+
size: FollowActionIconSize))
241+
]);
242+
}
243+
}

0 commit comments

Comments
 (0)