Skip to content

Commit cdf1633

Browse files
dangngocducdangngocduc
authored
Merge pull request #2 from dangngocduc/develop
Develop
2 parents 096afcb + 675a9fc commit cdf1633

12 files changed

+297
-13
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
|Demo | Demo | Demo | Demo |
77
|:----|:----|:----|:----|
88
|![](./demo/home_page_dark.png)|![](./demo/home_page_light.png)|![](./demo/activity_page_dark.png)|![](./demo/activity_page_light.png)|
9-
|![](./demo/search_page_dark.png)|![](./demo/search_page_light.png)|![](./demo/home_page_light.png)|![](./demo/home_page_light.png)|
9+
|![](./demo/search_page_dark.png)|![](./demo/search_page_light.png)|![](./demo/account_page_light.png)|![](./demo/account_page_dark.png)|
1010

1111

‎assets/sample/ic_avatar_1.jpg‎

26.4 KB
Loading

‎demo/account_page_dark.png‎

346 KB
Loading

‎demo/account_page_light.png‎

347 KB
Loading

‎lib/application.dart‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter/services.dart';
3+
import 'package:google_fonts/google_fonts.dart';
34
import 'dart:developer' as developer;
45

56
import 'package:instagramflutter/features/main_page.dart';
@@ -35,21 +36,22 @@ class _ApplicationState extends State<Application> {
3536
primaryIconTheme: IconThemeData(
3637
color: Colors.black
3738
),
38-
primaryTextTheme: ThemeData.light().textTheme,
3939
brightness: Brightness.light,
4040
cardColor: Colors.white,
4141
backgroundColor: Colors.grey[200],
4242
scaffoldBackgroundColor: Colors.grey[200],
4343
colorScheme: ColorScheme.light(
4444
onPrimary: Colors.black
4545
),
46-
textTheme: ThemeData.light().textTheme.copyWith(
47-
caption: ThemeData.light().textTheme.caption.copyWith(
48-
color: Colors.black54,
49-
fontSize: 10,
50-
fontWeight: FontWeight.w500
51-
)
52-
)
46+
primaryTextTheme: GoogleFonts.latoTextTheme(ThemeData.light().textTheme),
47+
accentTextTheme: GoogleFonts.latoTextTheme(ThemeData.light().accentTextTheme),
48+
textTheme: GoogleFonts.latoTextTheme(ThemeData.light().textTheme.copyWith(
49+
caption: ThemeData.light().textTheme.caption.copyWith(
50+
color: Colors.black54,
51+
fontSize: 10,
52+
fontWeight: FontWeight.w500
53+
)
54+
))
5355
),
5456
darkTheme: ThemeData.dark().copyWith(
5557
primaryColor: Colors.black,
@@ -65,13 +67,15 @@ class _ApplicationState extends State<Application> {
6567
colorScheme: ColorScheme.dark(
6668
onPrimary: Colors.white
6769
),
68-
textTheme: ThemeData.dark().textTheme.copyWith(
70+
primaryTextTheme: GoogleFonts.latoTextTheme(ThemeData.dark().textTheme),
71+
accentTextTheme: GoogleFonts.latoTextTheme(ThemeData.dark().accentTextTheme),
72+
textTheme: GoogleFonts.latoTextTheme(ThemeData.dark().textTheme.copyWith(
6973
caption: ThemeData.dark().textTheme.caption.copyWith(
70-
color: Colors.white54,
74+
color: Colors.black54,
7175
fontSize: 10,
7276
fontWeight: FontWeight.w500
7377
)
74-
)
78+
))
7579
),
7680
themeMode: ThemeMode.system,
7781
home: MainPage(),

‎lib/features/account/account_page.dart‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import 'package:flutter/material.dart';
2+
import 'package:instagramflutter/features/account/tab_bar_sliver_persistent_header_delegate.dart';
23
import 'dart:developer' as developer;
34

5+
import 'header_account_widget.dart';
6+
47
class AccountPage extends StatefulWidget {
58
static const ROUTE_NAME = 'AccountPage';
69
@override
@@ -11,6 +14,90 @@ class _AccountPageState extends State<AccountPage> {
1114
static const TAG = 'AccountPage';
1215
@override
1316
Widget build(BuildContext context) {
14-
return Scaffold();
17+
return DefaultTabController(
18+
length: 2,
19+
child: Scaffold(
20+
appBar: PreferredSize(
21+
child: Material(
22+
elevation: 4,
23+
color: Theme.of(context).primaryColor,
24+
child: SafeArea(
25+
child: Container(
26+
color: Theme.of(context).primaryColor,
27+
height: kToolbarHeight,
28+
child: Row(
29+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
30+
children: <Widget>[
31+
Container(
32+
padding: EdgeInsets.symmetric(
33+
vertical: 8,
34+
horizontal: 12
35+
),
36+
child: Row(
37+
children: <Widget>[
38+
Text('dangngocduc', style: Theme.of(context).primaryTextTheme.subtitle2,),
39+
Icon(Icons.keyboard_arrow_down, size: 16,)
40+
],
41+
),
42+
),
43+
IconButton(icon: Icon(Icons.menu), onPressed: (){})
44+
],
45+
),
46+
),
47+
),
48+
),
49+
preferredSize: Size.fromHeight(kToolbarHeight),
50+
),
51+
body: NestedScrollView(
52+
headerSliverBuilder: (context, innerBoxIsScrolled) {
53+
return [
54+
SliverToBoxAdapter(
55+
child: HeaderAccountWidget(),
56+
),
57+
SliverPersistentHeader(
58+
pinned: true,
59+
delegate: TabBarSliverPersistentHeaderDelegate(
60+
child: Container(
61+
height: 48,
62+
child: TabBar(
63+
indicatorColor: Theme.of(context).colorScheme.onBackground,
64+
tabs: [
65+
Tab(icon: Icon(Icons.grid_on),),
66+
Tab(icon: Icon(Icons.person_outline),)
67+
],
68+
),
69+
)
70+
),
71+
)
72+
];
73+
},
74+
body: TabBarView(
75+
children: [
76+
GridView.builder(
77+
padding: EdgeInsets.all(2),
78+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
79+
crossAxisCount: 4,
80+
crossAxisSpacing: 2,
81+
mainAxisSpacing: 2
82+
),
83+
itemCount: 40,
84+
itemBuilder: (context, index) {
85+
return Image.asset('assets/sample/search_demo1.jpg', fit: BoxFit.cover,);
86+
}),
87+
GridView.builder(
88+
padding: EdgeInsets.all(2),
89+
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
90+
crossAxisCount: 4,
91+
crossAxisSpacing: 2,
92+
mainAxisSpacing: 2
93+
),
94+
itemCount: 40,
95+
itemBuilder: (context, index) {
96+
return Image.asset('assets/sample/search_demo1.jpg', fit: BoxFit.cover,);
97+
})
98+
]
99+
)),
100+
),
101+
);
15102
}
16103
}

‎lib/features/account/big_avatar_user_widget.dart‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:developer' as developer;
3+
4+
class BigAvatarUserWidget extends StatefulWidget {
5+
static const ROUTE_NAME = 'BigAvatarUserWidget';
6+
@override
7+
_BigAvatarUserWidgetState createState() => _BigAvatarUserWidgetState();
8+
}
9+
10+
class _BigAvatarUserWidgetState extends State<BigAvatarUserWidget> {
11+
static const TAG = 'BigAvatarUserWidget';
12+
@override
13+
Widget build(BuildContext context) {
14+
return Container(
15+
width: 80,
16+
height: 80,
17+
child: Stack(
18+
children: <Widget>[
19+
Positioned.fill(child: CircleAvatar(
20+
backgroundImage: AssetImage('assets/sample/ic_avatar_1.jpg'),
21+
)),
22+
Positioned(
23+
child: ClipOval(
24+
child: Container(
25+
decoration: ShapeDecoration(
26+
color: Colors.blueAccent,
27+
shape: CircleBorder(
28+
side: Divider.createBorderSide(context, width: 2, color: Theme.of(context).cardColor),
29+
)
30+
),
31+
padding: EdgeInsets.all(2),
32+
alignment: Alignment.center,
33+
child: Icon(Icons.add, size: 12, color: Colors.white,),
34+
),
35+
),
36+
right: 0,
37+
bottom: 0,
38+
)
39+
],
40+
),
41+
);
42+
}
43+
}

‎lib/features/account/header_account_widget.dart‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:developer' as developer;
3+
4+
import 'big_avatar_user_widget.dart';
5+
import 'menu_item_widget.dart';
6+
7+
class HeaderAccountWidget extends StatefulWidget {
8+
static const ROUTE_NAME = 'HeaderAccountWidget';
9+
@override
10+
_HeaderAccountWidgetState createState() => _HeaderAccountWidgetState();
11+
}
12+
13+
class _HeaderAccountWidgetState extends State<HeaderAccountWidget> {
14+
static const TAG = 'HeaderAccountWidget';
15+
@override
16+
Widget build(BuildContext context) {
17+
return Material(
18+
color: Theme.of(context).cardColor,
19+
child: Column(
20+
children: <Widget>[
21+
Container(
22+
padding: EdgeInsets.symmetric(
23+
vertical: 16,
24+
horizontal: 16,
25+
),
26+
child: Row(
27+
crossAxisAlignment: CrossAxisAlignment.center,
28+
children: <Widget>[
29+
Column(
30+
crossAxisAlignment: CrossAxisAlignment.start,
31+
mainAxisSize: MainAxisSize.min,
32+
children: <Widget>[
33+
BigAvatarUserWidget(),
34+
Padding(
35+
padding: EdgeInsets.only(top: 8),
36+
child: Text('Đặng Ngọc Đức', style: Theme.of(context).textTheme.bodyText1,),
37+
)
38+
],
39+
),
40+
Expanded(
41+
child: Container(
42+
alignment: Alignment.center,
43+
child: Row(
44+
children: <Widget>[
45+
Expanded(child: MenuItemWidget(title: '146', content: 'Post',)),
46+
Expanded(child: MenuItemWidget(title: '130', content: 'Followers',)),
47+
Expanded(child: MenuItemWidget(title: '146', content: 'Following',))
48+
],
49+
),
50+
)
51+
)
52+
],
53+
),
54+
),
55+
Container(
56+
padding: EdgeInsets.symmetric(
57+
horizontal: 16
58+
),
59+
child: Text('Mastering B&W: The Art of B&W \nEditor: @dangngocduc Mod: @dangngocduc @dangngocduc \nFounder: @dangngocduc',
60+
style: Theme.of(context).textTheme.bodyText1,),
61+
),
62+
Container(
63+
padding: EdgeInsets.symmetric(
64+
vertical: 4,
65+
horizontal: 16
66+
),
67+
width: double.infinity,
68+
child: OutlineButton(
69+
shape: RoundedRectangleBorder(
70+
borderRadius: BorderRadius.all(Radius.circular(4))
71+
),
72+
onPressed: (){},
73+
child: Text('Edit Profile', style: Theme.of(context).textTheme.subtitle2,),
74+
),
75+
)
76+
],
77+
),
78+
);
79+
}
80+
}

‎lib/features/account/menu_item_widget.dart‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:developer' as developer;
3+
4+
class MenuItemWidget extends StatelessWidget {
5+
final String title;
6+
final String content;
7+
8+
MenuItemWidget({@required this.title, @required this.content});
9+
10+
@override
11+
Widget build(BuildContext context) {
12+
return Container(
13+
padding: EdgeInsets.all(8),
14+
child: Column(
15+
mainAxisSize: MainAxisSize.min,
16+
children: <Widget>[
17+
Text('$title', style: Theme.of(context).textTheme.subtitle2.copyWith(
18+
fontWeight: FontWeight.w800
19+
),),
20+
Padding(
21+
padding: EdgeInsets.only(top: 2),
22+
child: Text('$content', style: Theme.of(context).textTheme.bodyText2.copyWith(
23+
fontSize: 13
24+
),),
25+
)
26+
],
27+
),
28+
);
29+
}
30+
}

‎lib/features/account/tab_bar_sliver_persistent_header_delegate.dart‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import 'dart:developer' as developer;
2+
3+
import 'package:flutter/material.dart';
4+
import 'package:flutter/widgets.dart';
5+
6+
class TabBarSliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate{
7+
static const TAG = 'TabBarSliverPersistentHeaderDelegate';
8+
9+
Widget child;
10+
11+
TabBarSliverPersistentHeaderDelegate({this.child});
12+
13+
@override
14+
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
15+
return Material(
16+
child: child,
17+
color: Theme.of(context).cardColor,
18+
elevation: overlapsContent ? 4 : 0,
19+
);
20+
}
21+
22+
@override
23+
double get maxExtent => 48.0;
24+
25+
@override
26+
double get minExtent => 48.0;
27+
28+
@override
29+
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
30+
return true;
31+
}
32+
33+
34+
}

0 commit comments

Comments
 (0)