diff --git a/images/feed/feed11-city1.png b/images/feed/feed11-city1.png new file mode 100644 index 0000000..9589922 Binary files /dev/null and b/images/feed/feed11-city1.png differ diff --git a/images/feed/feed11-city2.png b/images/feed/feed11-city2.png new file mode 100644 index 0000000..67ff32c Binary files /dev/null and b/images/feed/feed11-city2.png differ diff --git a/images/feed/feed11-header.png b/images/feed/feed11-header.png new file mode 100644 index 0000000..55fefc6 Binary files /dev/null and b/images/feed/feed11-header.png differ diff --git a/lib/page/feed/FeedPageEleven.dart b/lib/page/feed/FeedPageEleven.dart index 78ea899..753208d 100644 --- a/lib/page/feed/FeedPageEleven.dart +++ b/lib/page/feed/FeedPageEleven.dart @@ -4,20 +4,231 @@ /// Email: niebin312@gmail.com /// import "package:flutter/material.dart"; +import 'top_title.dart'; +import "package:flutter_ui_nice/util/SizeUtil.dart"; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'feed_const.dart'; class FeedPageEleven extends StatefulWidget { @override _FeedState createState() => _FeedState(); } -class _FeedState extends State { +class _FeedState extends State + with SingleTickerProviderStateMixin { + TabController tabController; + var curTab = 0; + + void initState() { + super.initState(); + tabController = TabController(length: 3, vsync: this); + tabController.addListener(() { + setState(() { + curTab = tabController.index; + }); + }); + } + + Widget _textBack(content, {size = TEXT_SMALL_2_SIZE, isBold = false}) => Text( + content, + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(size), + fontWeight: isBold ? FontWeight.w700 : null), + ); + + Widget _listItemContent() => Positioned( + bottom: 0.1, + left: SizeUtil.getAxisX(136.0), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular( + SizeUtil.getAxisBoth(22.0), + ), + gradient: LinearGradient(colors: [RED_LIGHT, RED]), + ), + height: SizeUtil.getAxisY(182.0), + width: SizeUtil.getAxisY(528.0), + child: Stack( + children: [ + Positioned( + top: SizeUtil.getAxisY(27.0), + left: SizeUtil.getAxisX(87.0), + child: _textBack("Blanche Garcia", + size: TEXT_SMALL_3_SIZE, isBold: true), + ), + Positioned( + top: SizeUtil.getAxisY(66.0), + left: SizeUtil.getAxisX(87.0), + child: + _textBack("Netherlands Antilles", size: TEXT_NORMAL_SIZE), + ), + Positioned( + top: SizeUtil.getAxisY(27.0), + right: SizeUtil.getAxisX(33.0), + child: _textBack("31 Dec"), + ), + Positioned( + bottom: SizeUtil.getAxisY(30.0), + left: SizeUtil.getAxisX(90.0), + child: Container( + alignment: AlignmentDirectional.centerStart, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + Icons.favorite_border, + color: TEXT_BLACK, + size: SizeUtil.getAxisBoth(30.0), + ), + SizedBox( + width: SizeUtil.getAxisX(16.0), + ), + _textBack("72"), + SizedBox( + width: SizeUtil.getAxisX(45.0), + ), + Icon( + Icons.chat, + color: TEXT_BLACK, + size: SizeUtil.getAxisBoth(30.0), + ), + SizedBox( + width: SizeUtil.getAxisX(16.0), + ), + _textBack("44"), + ], + ), + ), + ), + ], + ), + ), + ); + + Widget _listItem(index) => Container( + alignment: AlignmentDirectional.topStart, + constraints: BoxConstraints.expand(height: SizeUtil.getAxisY(850.0)), + child: Stack( + children: [ + Container( + alignment: AlignmentDirectional.topStart, + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(45.0), + bottom: SizeUtil.getAxisY(84.0), + left: SizeUtil.getAxisX(30.0), + right: SizeUtil.getAxisX(30.0), + ), + child: Image.asset( + index % 2 == 0 + ? FeedImage.feed11_city1 + : FeedImage.feed11_city2, + fit: BoxFit.cover, + ), + ), + _listItemContent(), + Positioned( + width: SizeUtil.getAxisBoth(100.0), + height: SizeUtil.getAxisBoth(100.0), + bottom: SizeUtil.getAxisY(41.0), + left: SizeUtil.getAxisX(81.0), + child: Image.asset(FeedImage.feed11_header), + ), + ], + ), + ); + + Widget _listContainer() => Container( + child: ListView.builder( + itemBuilder: (context, index) { + return _listItem(index); + }, + itemCount: 4, + padding: EdgeInsets.only(top: 0.1), + ), + ); + + Widget _tabTitleItem(title, isCurrent) => Container( + width: SizeUtil.getAxisX(220.0), + height: SizeUtil.getAxisY(154.0), + alignment: AlignmentDirectional.center, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: isCurrent + ? [RED_LIGHT, RED] + : [Color(0x44FFFFFF), Color(0x44FFFFFF)]), + borderRadius: BorderRadius.circular( + SizeUtil.getAxisX(22.0), + ), + boxShadow: isCurrent + ? [BoxShadow(color: DARK_COLOR, offset: Offset(0.0, 2.0))] + : null), + child: Text( + title, + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE), + ), + ), + ); + + Widget _tabView(context) { + return DefaultTabController( + length: 3, + child: Column( + children: [ + Container( + constraints: + BoxConstraints.expand(height: SizeUtil.getAxisY(154.0)), + child: TabBar( + controller: tabController, + tabs: [ + _tabTitleItem("Products", curTab == 0), + _tabTitleItem("Recent", curTab == 1), + _tabTitleItem("News", curTab == 2), + ], + isScrollable: false, + indicatorWeight: 0.0001, + ), + ), + Expanded( + child: TabBarView( + children: [ + _listContainer(), + _listContainer(), + _listContainer(), + ], + controller: tabController, + ), + ) + ], + )); + } + @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: Text("Feed Eleven"), + body: Container( + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, GREEN])), + child: Column( + children: [ + TopTitleBar(), + SizedBox( + height: SizeUtil.getAxisY(43.0), + ), + Expanded( + child: _tabView(context), + ), + ], + ), ), - body: Text("Feed page Eleven"), ); } + + @override + void dispose() { + tabController.dispose(); + super.dispose(); + } } diff --git a/lib/page/feed/feed_const.dart b/lib/page/feed/feed_const.dart index b81ad21..187dd05 100644 --- a/lib/page/feed/feed_const.dart +++ b/lib/page/feed/feed_const.dart @@ -5,7 +5,7 @@ import "package:flutter/material.dart"; class FeedStringConst { - static const FEED_NAME = "Feed"; + static const FEED_NAME = "FEED"; } const CIRCLE_BUTTON_HEIGHT = 87.0; @@ -16,6 +16,8 @@ const TEXT_LARGE_SIZE = 40.0; const TEXT_NORMAL_2_SIZE = 28.0; const TEXT_NORMAL_SIZE = 26.0; const TEXT_SMALL_SIZE = 20.0; +const TEXT_SMALL_2_SIZE = 22.0; +const TEXT_SMALL_3_SIZE = 24.0; class FeedImage { static const IMAGE_PATH = "images/feed"; @@ -24,4 +26,7 @@ class FeedImage { static const white_back = "$IMAGE_PATH/white_background.png"; static const city = "$IMAGE_PATH/city.png"; static const shop_river = "$IMAGE_PATH/shop_river.png"; + static const feed11_city1 = "$IMAGE_PATH/feed11-city1.png"; + static const feed11_city2 = "$IMAGE_PATH/feed11-city2.png"; + static const feed11_header = "$IMAGE_PATH/feed11-header.png"; }