Skip to content

Commit 72a7740

Browse files
dangngocducdangngocduc
committed
[DEV] Done View Story + Explore
1 parent cdf1633 commit 72a7740

File tree

12 files changed

+330
-98
lines changed

12 files changed

+330
-98
lines changed

‎lib/application.dart‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
import 'package:flutter/cupertino.dart';
12
import 'package:flutter/material.dart';
23
import 'package:flutter/services.dart';
34
import 'package:google_fonts/google_fonts.dart';
5+
import 'package:instagramflutter/features/explore/explore_page.dart';
46
import 'dart:developer' as developer;
57

68
import 'package:instagramflutter/features/main_page.dart';
9+
import 'package:instagramflutter/features/story/story_page.dart';
710

811
class Application extends StatefulWidget {
912
static const ROUTE_NAME = 'Application';
@@ -78,7 +81,19 @@ class _ApplicationState extends State<Application> {
7881
))
7982
),
8083
themeMode: ThemeMode.system,
81-
home: MainPage(),
84+
onGenerateRoute: (setting) {
85+
switch(setting.name) {
86+
case StoryPage.ROUTE_NAME: {
87+
return CupertinoPageRoute(builder: (context) => StoryPage());
88+
}
89+
case ExplorePage.ROUTE_NAME: {
90+
return CupertinoPageRoute(builder: (context) => ExplorePage());
91+
}
92+
default:
93+
return CupertinoPageRoute(builder: (context) => MainPage());
94+
}
95+
},
96+
initialRoute: MainPage.ROUTE_NAME,
8297
);
8398
}
8499
}

‎lib/features/account/account_page.dart‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:instagramflutter/features/account/app_bar_account.dart';
23
import 'package:instagramflutter/features/account/tab_bar_sliver_persistent_header_delegate.dart';
34
import 'dart:developer' as developer;
45

@@ -17,40 +18,10 @@ class _AccountPageState extends State<AccountPage> {
1718
return DefaultTabController(
1819
length: 2,
1920
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-
),
5121
body: NestedScrollView(
5222
headerSliverBuilder: (context, innerBoxIsScrolled) {
5323
return [
24+
AppBarAccount(),
5425
SliverToBoxAdapter(
5526
child: HeaderAccountWidget(),
5627
),

‎lib/features/account/app_bar_account.dart‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:developer' as developer;
3+
4+
import 'app_bar_account_delegate.dart';
5+
6+
class AppBarAccount extends StatefulWidget {
7+
static const ROUTE_NAME = 'AppBarAccount';
8+
@override
9+
_AppBarAccountState createState() => _AppBarAccountState();
10+
}
11+
12+
class _AppBarAccountState extends State<AppBarAccount> {
13+
static const TAG = 'AppBarAccount';
14+
@override
15+
Widget build(BuildContext context) {
16+
developer.log('build [context]', name: TAG);
17+
return SliverPersistentHeader(
18+
pinned: true,
19+
delegate: AppBarAccountDelegate(MediaQuery.of(context).padding.top),
20+
);
21+
}
22+
}

‎lib/features/account/app_bar_account_delegate.dart‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import 'dart:developer' as developer;
2+
3+
import 'package:flutter/cupertino.dart';
4+
import 'package:flutter/material.dart';
5+
6+
class AppBarAccountDelegate extends SliverPersistentHeaderDelegate {
7+
static const TAG = 'AppBarAccount';
8+
9+
final double topPadding;
10+
11+
AppBarAccountDelegate(this.topPadding);
12+
13+
@override
14+
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
15+
developer.log('build [$context, $shrinkOffset, $overlapsContent]', name: TAG);
16+
return Material(
17+
color: Theme.of(context).primaryColor,
18+
child: Container(
19+
height: kToolbarHeight + topPadding,
20+
padding: EdgeInsets.only(top: topPadding),
21+
child: Row(
22+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
23+
children: <Widget>[
24+
Container(
25+
padding: EdgeInsets.symmetric(
26+
vertical: 8,
27+
horizontal: 12
28+
),
29+
child: Row(
30+
children: <Widget>[
31+
Text('dangngocduc', style: Theme.of(context).primaryTextTheme.subtitle2,),
32+
Icon(Icons.keyboard_arrow_down, size: 16,)
33+
],
34+
),
35+
),
36+
IconButton(icon: Icon(Icons.menu), onPressed: (){})
37+
],
38+
),
39+
),
40+
elevation: (overlapsContent || (shrinkOffset > maxExtent - minExtent)) ? 4: 0,
41+
);
42+
}
43+
44+
@override
45+
double get maxExtent => kToolbarHeight + topPadding;
46+
47+
@override
48+
double get minExtent => kToolbarHeight + topPadding;
49+
50+
@override
51+
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
52+
return true;
53+
}
54+
55+
56+
}

‎lib/features/account/header_account_widget.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'big_avatar_user_widget.dart';
55
import 'menu_item_widget.dart';
66

77
class HeaderAccountWidget extends StatefulWidget {
8+
89
static const ROUTE_NAME = 'HeaderAccountWidget';
910
@override
1011
_HeaderAccountWidgetState createState() => _HeaderAccountWidgetState();

‎lib/features/explore/explore_page.dart‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:developer' as developer;
3+
4+
import 'package:instagramflutter/widgets/feed/feed_widget.dart';
5+
6+
class ExplorePage extends StatefulWidget {
7+
static const ROUTE_NAME = 'ExplorePage';
8+
@override
9+
_ExplorePageState createState() => _ExplorePageState();
10+
}
11+
12+
class _ExplorePageState extends State<ExplorePage> {
13+
static const TAG = 'ExplorePage';
14+
@override
15+
Widget build(BuildContext context) {
16+
return Scaffold(
17+
body: CustomScrollView(
18+
slivers: <Widget>[
19+
SliverAppBar(
20+
title: Text('Explore'),
21+
floating: true,
22+
),
23+
SliverList(
24+
delegate: SliverChildBuilderDelegate(
25+
(context, index) => FeedWidget(),
26+
childCount: 10
27+
),
28+
)
29+
],
30+
),
31+
);
32+
}
33+
}

‎lib/features/main_page.dart‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,43 +27,49 @@ class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
2727
void didChangePlatformBrightness() {
2828
super.didChangePlatformBrightness();
2929
developer.log('didChangePlatformBrightness Theme.of(context).brightness: ${Theme.of(context).brightness}', name: TAG);
30-
if (Theme.of(context).brightness != Brightness.light) {
31-
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
32-
systemNavigationBarColor: Colors.white,
33-
statusBarColor: Colors.white,
34-
statusBarIconBrightness: Brightness.dark,
35-
systemNavigationBarIconBrightness: Brightness.dark
36-
));
37-
} else {
38-
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
39-
systemNavigationBarColor: Colors.black,
40-
statusBarColor: Colors.black,
41-
statusBarIconBrightness: Brightness.light,
42-
systemNavigationBarIconBrightness: Brightness.light
43-
));
44-
}
30+
// if (Theme.of(context).brightness != Brightness.light) {
31+
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
32+
// systemNavigationBarColor: Colors.white,
33+
// statusBarColor: Colors.white,
34+
// statusBarIconBrightness: Brightness.dark,
35+
// systemNavigationBarIconBrightness: Brightness.dark
36+
// ));
37+
// } else {
38+
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
39+
// systemNavigationBarColor: Colors.black,
40+
// statusBarColor: Colors.black,
41+
// statusBarIconBrightness: Brightness.light,
42+
// systemNavigationBarIconBrightness: Brightness.light
43+
// ));
44+
// }
4545
}
4646

4747
@override
4848
void didChangeDependencies() {
4949
super.didChangeDependencies();
5050
WidgetsBinding.instance.addObserver(this);
5151
_pageController = PageController(initialPage: 1);
52-
if (Theme.of(context).brightness == Brightness.light) {
53-
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
54-
systemNavigationBarColor: Colors.white,
55-
statusBarColor: Colors.white,
56-
statusBarIconBrightness: Brightness.dark,
57-
systemNavigationBarIconBrightness: Brightness.dark
58-
));
59-
} else {
60-
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
52+
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
6153
systemNavigationBarColor: Colors.black,
62-
statusBarColor: Colors.black,
63-
statusBarIconBrightness: Brightness.light,
64-
systemNavigationBarIconBrightness: Brightness.light
54+
statusBarColor: null,
55+
statusBarIconBrightness: null,
56+
systemNavigationBarIconBrightness: null
6557
));
66-
}
58+
// if (Theme.of(context).brightness == Brightness.light) {
59+
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
60+
// systemNavigationBarColor: Colors.white,
61+
// statusBarColor: Colors.white,
62+
// statusBarIconBrightness: Brightness.dark,
63+
// systemNavigationBarIconBrightness: Brightness.dark
64+
// ));
65+
// } else {
66+
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
67+
// systemNavigationBarColor: Colors.black,
68+
// statusBarColor: Colors.black,
69+
// statusBarIconBrightness: Brightness.light,
70+
// systemNavigationBarIconBrightness: Brightness.light
71+
// ));
72+
// }
6773
}
6874

6975
@override

‎lib/features/search/search_pages.dart‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_svg/flutter_svg.dart';
3+
import 'package:instagramflutter/features/explore/explore_page.dart';
34
import 'package:instagramflutter/res/icons_app.dart';
45
import 'dart:developer' as developer;
56

@@ -68,7 +69,12 @@ class _SearchPagesState extends State<SearchPages> {
6869
),
6970
itemCount: 40,
7071
itemBuilder: (context, index) {
71-
return Image.asset('assets/sample/search_demo1.jpg', fit: BoxFit.cover,);
72+
return InkResponse(
73+
child: Image.asset('assets/sample/search_demo1.jpg', fit: BoxFit.cover,),
74+
onTap: () {
75+
Navigator.of(context).pushNamed(ExplorePage.ROUTE_NAME);
76+
},
77+
);
7278
}),
7379
);
7480

‎lib/features/story/content_input_widget.dart‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_svg/flutter_svg.dart';
3+
import 'dart:developer' as developer;
4+
5+
import 'package:instagramflutter/res/icons_app.dart';
6+
7+
const _kHeightInput = 48.0;
8+
9+
class ContentInputWidget extends StatefulWidget {
10+
static const ROUTE_NAME = 'ContentInputWidget';
11+
@override
12+
_ContentInputWidgetState createState() => _ContentInputWidgetState();
13+
}
14+
15+
class _ContentInputWidgetState extends State<ContentInputWidget> {
16+
static const TAG = 'ContentInputWidget';
17+
@override
18+
Widget build(BuildContext context) {
19+
return SafeArea(
20+
bottom: true,
21+
top: false,
22+
child: Material(
23+
color: Colors.black,
24+
child: Container(
25+
padding: EdgeInsets.all(8),
26+
width: double.infinity,
27+
child: Row(
28+
mainAxisSize: MainAxisSize.max,
29+
children: <Widget>[
30+
Container(
31+
padding: EdgeInsets.all(12),
32+
decoration: ShapeDecoration(
33+
shape: CircleBorder(
34+
side: Divider.createBorderSide(context, color: Colors.white)
35+
),
36+
),
37+
child: Icon(Icons.camera_alt, color: Colors.white,),
38+
),
39+
Expanded(
40+
child: Padding(
41+
padding: EdgeInsets.only(left: 8),
42+
child: Container(
43+
padding: EdgeInsets.only(left: 16),
44+
decoration: ShapeDecoration(
45+
shape: StadiumBorder(
46+
side: Divider.createBorderSide(context, color: Colors.white)
47+
),
48+
),
49+
child: TextField(
50+
decoration: InputDecoration(
51+
border: InputBorder.none,
52+
hintText: 'Send message',
53+
hintStyle: Theme.of(context).textTheme.subtitle1.copyWith(
54+
color: Colors.white54
55+
),
56+
suffixIcon: Icon(Icons.insert_emoticon, color: Colors.white,)
57+
),
58+
),
59+
)
60+
)
61+
),
62+
IconButton(
63+
icon: SvgPicture.asset(IconsApp.icSend, color: Colors.white),
64+
onPressed: (){}),
65+
IconButton(
66+
icon: Icon(Icons.more_vert),
67+
onPressed: (){})
68+
],
69+
),
70+
),
71+
),
72+
);
73+
}
74+
}

0 commit comments

Comments
 (0)