From b9c84f711a850b0d6200c7e21b9a663c3926ac98 Mon Sep 17 00:00:00 2001 From: jideguru Date: Sun, 26 Jul 2020 21:07:55 +0100 Subject: [PATCH 1/3] Refactored home.dart --- lib/screens/home.dart | 274 ++++--------------------- lib/screens/main_screen.dart | 25 ++- lib/widgets/horizontal_place_item.dart | 71 +++++++ lib/widgets/icon_badge.dart | 8 +- lib/widgets/search_bar.dart | 49 +++++ lib/widgets/vertical_place_item.dart | 104 ++++++++++ 6 files changed, 284 insertions(+), 247 deletions(-) create mode 100644 lib/widgets/horizontal_place_item.dart create mode 100644 lib/widgets/search_bar.dart create mode 100644 lib/widgets/vertical_place_item.dart diff --git a/lib/screens/home.dart b/lib/screens/home.dart index 3efad2d..dabd21a 100644 --- a/lib/screens/home.dart +++ b/lib/screens/home.dart @@ -1,16 +1,11 @@ import 'package:flutter/material.dart'; -import 'package:flutter_travel_concept/screens/details.dart'; -import 'package:flutter_travel_concept/widgets/icon_badge.dart'; import 'package:flutter_travel_concept/util/places.dart'; +import 'package:flutter_travel_concept/widgets/horizontal_place_item.dart'; +import 'package:flutter_travel_concept/widgets/icon_badge.dart'; +import 'package:flutter_travel_concept/widgets/search_bar.dart'; +import 'package:flutter_travel_concept/widgets/vertical_place_item.dart'; -class Home extends StatefulWidget { - @override - _HomeState createState() => _HomeState(); -} - -class _HomeState extends State { - final TextEditingController _searchControl = new TextEditingController(); - +class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( @@ -27,237 +22,56 @@ class _HomeState extends State { body: ListView( children: [ Padding( - padding: EdgeInsets.all(20), + padding: EdgeInsets.all(20.0), child: Text( "Where are you \ngoing?", style: TextStyle( - fontSize: 30, + fontSize: 30.0, fontWeight: FontWeight.w600, ), ), ), Padding( - padding: EdgeInsets.all(20), - child: Container( - decoration: BoxDecoration( - color: Colors.blueGrey[50], - borderRadius: BorderRadius.all( - Radius.circular(5.0), - ), - ), - child: TextField( - style: TextStyle( - fontSize: 15.0, - color: Colors.blueGrey[300], - ), - decoration: InputDecoration( - contentPadding: EdgeInsets.all(10.0), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(5.0), - borderSide: BorderSide( - color: Colors.white, - ), - ), - enabledBorder: OutlineInputBorder( - borderSide: BorderSide( - color: Colors.white, - ), - borderRadius: BorderRadius.circular(5.0), - ), - hintText: "E.g: New York, United States", - prefixIcon: Icon( - Icons.location_on, - color: Colors.blueGrey[300], - ), - hintStyle: TextStyle( - fontSize: 15.0, - color: Colors.blueGrey[300], - ), - ), - maxLines: 1, - controller: _searchControl, - ), - ), - ), - Container( - padding: EdgeInsets.only(top: 10, left: 20), - height: 250, -// color: Colors.red, - width: MediaQuery.of(context).size.width, - child: ListView.builder( - scrollDirection: Axis.horizontal, - primary: false, - itemCount: places == null ? 0 : places.length, - itemBuilder: (BuildContext context, int index) { - Map place = places.reversed.toList()[index]; - return Padding( - padding: const EdgeInsets.only(right: 20), - child: InkWell( - child: Container( - height: 250, - width: 140, -// color: Colors.green, - child: Column( - children: [ - ClipRRect( - borderRadius: BorderRadius.circular(10), - child: Image.asset( - "${place["img"]}", - height: 178, - width: 140, - fit: BoxFit.cover, - ), - ), - SizedBox(height: 7), - Container( - alignment: Alignment.centerLeft, - child: Text( - "${place["name"]}", - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15, - ), - maxLines: 2, - textAlign: TextAlign.left, - ), - ), - SizedBox(height: 3), - Container( - alignment: Alignment.centerLeft, - child: Text( - "${place["location"]}", - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 13, - color: Colors.blueGrey[300], - ), - maxLines: 1, - textAlign: TextAlign.left, - ), - ), - ], - ), - ), - onTap: () { - Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return Details(); - }, - ), - ); - }, - ), - ); - }, - ), - ), - Padding( - padding: EdgeInsets.all(20), - child: ListView.builder( - primary: false, - physics: NeverScrollableScrollPhysics(), - shrinkWrap: true, - itemCount: places == null ? 0 : places.length, - itemBuilder: (BuildContext context, int index) { - Map place = places[index]; - return Padding( - padding: const EdgeInsets.only(bottom: 15.0), - child: InkWell( - child: Container( - height: 70, -// color: Colors.red, - child: Row( - children: [ - ClipRRect( - borderRadius: BorderRadius.circular(5), - child: Image.asset( - "${place["img"]}", - height: 70, - width: 70, - fit: BoxFit.cover, - ), - ), - SizedBox(width: 15), - Container( - height: 80, - width: MediaQuery.of(context).size.width - 130, - child: ListView( - primary: false, - physics: NeverScrollableScrollPhysics(), - shrinkWrap: true, - children: [ - Container( - alignment: Alignment.centerLeft, - child: Text( - "${place["name"]}", - style: TextStyle( - fontWeight: FontWeight.w700, - fontSize: 14, - ), - maxLines: 2, - textAlign: TextAlign.left, - ), - ), - SizedBox(height: 3), - Row( - children: [ - Icon( - Icons.location_on, - size: 13, - color: Colors.blueGrey[300], - ), - SizedBox(width: 3), - Container( - alignment: Alignment.centerLeft, - child: Text( - "${place["location"]}", - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 13, - color: Colors.blueGrey[300], - ), - maxLines: 1, - textAlign: TextAlign.left, - ), - ), - ], - ), - SizedBox(height: 10), - Container( - alignment: Alignment.centerLeft, - child: Text( - "${place["price"]}", - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16, - ), - maxLines: 1, - textAlign: TextAlign.left, - ), - ), - ], - ), - ), - ], - ), - ), - onTap: () { - Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return Details(); - }, - ), - ); - }, - ), - ); - }, - ), + padding: EdgeInsets.all(20.0), + child: SearchBar(), ), + buildHorizontalList(context), + buildVerticalList(), ], ), ); } + + buildHorizontalList(BuildContext context) { + return Container( + padding: EdgeInsets.only(top: 10.0, left: 20.0), + height: 250.0, + width: MediaQuery.of(context).size.width, + child: ListView.builder( + scrollDirection: Axis.horizontal, + primary: false, + itemCount: places == null ? 0.0 : places.length, + itemBuilder: (BuildContext context, int index) { + Map place = places.reversed.toList()[index]; + return HorizontalPlaceItem(place: place); + }, + ), + ); + } + + buildVerticalList() { + return Padding( + padding: EdgeInsets.all(20.0), + child: ListView.builder( + primary: false, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: places == null ? 0 : places.length, + itemBuilder: (BuildContext context, int index) { + Map place = places[index]; + return VerticalPlaceItem(place: place); + }, + ), + ); + } } diff --git a/lib/screens/main_screen.dart b/lib/screens/main_screen.dart index 2318893..2a69477 100644 --- a/lib/screens/main_screen.dart +++ b/lib/screens/main_screen.dart @@ -13,17 +13,6 @@ class _MainScreenState extends State { @override Widget build(BuildContext context) { - Widget barIcon( - {IconData icon = Icons.home, int page = 0, bool badge = false}) { - return IconButton( - icon: badge ? IconBadge(icon: icon, size: 24) : Icon(icon, size: 24), - color: _page == page - ? Theme.of(context).accentColor - : Colors.blueGrey[300], - onPressed: () => _pageController.jumpToPage(page), - ); - } - return Scaffold( body: PageView( physics: NeverScrollableScrollPhysics(), @@ -36,12 +25,12 @@ class _MainScreenState extends State { mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - SizedBox(width: 7), + SizedBox(width: 7.0), barIcon(icon: Icons.home, page: 0), barIcon(icon: Icons.favorite, page: 1), barIcon(icon: Icons.mode_comment, page: 2, badge: true), barIcon(icon: Icons.person, page: 3), - SizedBox(width: 7), + SizedBox(width: 7.0), ], ), color: Theme.of(context).primaryColor, @@ -70,4 +59,14 @@ class _MainScreenState extends State { this._page = page; }); } + + Widget barIcon( + {IconData icon = Icons.home, int page = 0, bool badge = false}) { + return IconButton( + icon: badge ? IconBadge(icon: icon, size: 24.0) : Icon(icon, size: 24.0), + color: + _page == page ? Theme.of(context).accentColor : Colors.blueGrey[300], + onPressed: () => _pageController.jumpToPage(page), + ); + } } diff --git a/lib/widgets/horizontal_place_item.dart b/lib/widgets/horizontal_place_item.dart new file mode 100644 index 0000000..a40441e --- /dev/null +++ b/lib/widgets/horizontal_place_item.dart @@ -0,0 +1,71 @@ +import 'package:flutter/material.dart'; + +import '../screens/details.dart'; + +class HorizontalPlaceItem extends StatelessWidget { + final Map place; + + HorizontalPlaceItem({this.place}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(right: 20.0), + child: InkWell( + child: Container( + height: 250.0, + width: 140.0, + child: Column( + children: [ + ClipRRect( + borderRadius: BorderRadius.circular(10), + child: Image.asset( + "${place["img"]}", + height: 178.0, + width: 140.0, + fit: BoxFit.cover, + ), + ), + SizedBox(height: 7.0), + Container( + alignment: Alignment.centerLeft, + child: Text( + "${place["name"]}", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15.0, + ), + maxLines: 2, + textAlign: TextAlign.left, + ), + ), + SizedBox(height: 3.0), + Container( + alignment: Alignment.centerLeft, + child: Text( + "${place["location"]}", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 13.0, + color: Colors.blueGrey[300], + ), + maxLines: 1, + textAlign: TextAlign.left, + ), + ), + ], + ), + ), + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return Details(); + }, + ), + ); + }, + ), + ); + } +} diff --git a/lib/widgets/icon_badge.dart b/lib/widgets/icon_badge.dart index 07f60da..98ee682 100644 --- a/lib/widgets/icon_badge.dart +++ b/lib/widgets/icon_badge.dart @@ -38,16 +38,16 @@ class _IconBadgeState extends State { color: Theme.of(context).primaryColor, borderRadius: BorderRadius.circular(6), ), - height: 12, - width: 12, + height: 12.0, + width: 12.0, child: Container( padding: EdgeInsets.all(1), decoration: BoxDecoration( color: Colors.red[300], borderRadius: BorderRadius.circular(6), ), - height: 7, - width: 7, + height: 7.0, + width: 7.0, ), ), ), diff --git a/lib/widgets/search_bar.dart b/lib/widgets/search_bar.dart new file mode 100644 index 0000000..8b7e273 --- /dev/null +++ b/lib/widgets/search_bar.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; + +class SearchBar extends StatelessWidget { + final TextEditingController _searchControl = new TextEditingController(); + + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + color: Colors.blueGrey[50], + borderRadius: BorderRadius.all( + Radius.circular(5.0), + ), + ), + child: TextField( + style: TextStyle( + fontSize: 15.0, + color: Colors.blueGrey[300], + ), + decoration: InputDecoration( + contentPadding: EdgeInsets.all(10.0), + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(5.0), + borderSide: BorderSide( + color: Colors.white, + ), + ), + enabledBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.white, + ), + borderRadius: BorderRadius.circular(5.0), + ), + hintText: "E.g: New York, United States", + prefixIcon: Icon( + Icons.location_on, + color: Colors.blueGrey[300], + ), + hintStyle: TextStyle( + fontSize: 15.0, + color: Colors.blueGrey[300], + ), + ), + maxLines: 1, + controller: _searchControl, + ), + ); + } +} diff --git a/lib/widgets/vertical_place_item.dart b/lib/widgets/vertical_place_item.dart new file mode 100644 index 0000000..f8e9c93 --- /dev/null +++ b/lib/widgets/vertical_place_item.dart @@ -0,0 +1,104 @@ +import 'package:flutter/material.dart'; + +import '../screens/details.dart'; + +class VerticalPlaceItem extends StatelessWidget { + final Map place; + + VerticalPlaceItem({this.place}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(bottom: 15.0), + child: InkWell( + child: Container( + height: 70.0, + child: Row( + children: [ + ClipRRect( + borderRadius: BorderRadius.circular(5), + child: Image.asset( + "${place["img"]}", + height: 70.0, + width: 70.0, + fit: BoxFit.cover, + ), + ), + SizedBox(width: 15.0), + Container( + height: 80.0, + width: MediaQuery.of(context).size.width - 130.0, + child: ListView( + primary: false, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + children: [ + Container( + alignment: Alignment.centerLeft, + child: Text( + "${place["name"]}", + style: TextStyle( + fontWeight: FontWeight.w700, + fontSize: 14.0, + ), + maxLines: 2, + textAlign: TextAlign.left, + ), + ), + SizedBox(height: 3.0), + Row( + children: [ + Icon( + Icons.location_on, + size: 13.0, + color: Colors.blueGrey[300], + ), + SizedBox(width: 3.0), + Container( + alignment: Alignment.centerLeft, + child: Text( + "${place["location"]}", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 13.0, + color: Colors.blueGrey[300], + ), + maxLines: 1, + textAlign: TextAlign.left, + ), + ), + ], + ), + SizedBox(height: 10.0), + Container( + alignment: Alignment.centerLeft, + child: Text( + "${place["price"]}", + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16.0, + ), + maxLines: 1, + textAlign: TextAlign.left, + ), + ), + ], + ), + ), + ], + ), + ), + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return Details(); + }, + ), + ); + }, + ), + ); + } +} From ac2a0c710044b252cd1c4cbcd35d1e394c826da4 Mon Sep 17 00:00:00 2001 From: jideguru Date: Sun, 26 Jul 2020 21:13:26 +0100 Subject: [PATCH 2/3] Refactored detail.dart --- lib/screens/details.dart | 84 ++++++++++++++++------------------------ 1 file changed, 33 insertions(+), 51 deletions(-) diff --git a/lib/screens/details.dart b/lib/screens/details.dart index 990f6b1..71bf815 100644 --- a/lib/screens/details.dart +++ b/lib/screens/details.dart @@ -2,12 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_travel_concept/util/places.dart'; import 'package:flutter_travel_concept/widgets/icon_badge.dart'; -class Details extends StatefulWidget { - @override - _DetailsState createState() => _DetailsState(); -} - -class _DetailsState extends State
{ +class Details extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( @@ -27,35 +22,10 @@ class _DetailsState extends State
{ ), ], ), - body: ListView( children: [ - SizedBox(height: 10), - Container( - padding: EdgeInsets.only(left: 20), - height: 250, - child: ListView.builder( - scrollDirection: Axis.horizontal, - primary: false, - itemCount: places == null ? 0 : places.length, - itemBuilder: (BuildContext context, int index) { - Map place = places[index]; - - return Padding( - padding: EdgeInsets.only(right: 10), - child: ClipRRect( - borderRadius: BorderRadius.circular(10), - child: Image.asset( - "${place["img"]}", - height: 250, - width: MediaQuery.of(context).size.width - 40, - fit: BoxFit.cover, - ), - ), - ); - }, - ), - ), + SizedBox(height: 10.0), + buildSlider(), SizedBox(height: 20), ListView( padding: EdgeInsets.symmetric(horizontal: 20), @@ -135,45 +105,57 @@ class _DetailsState extends State
{ textAlign: TextAlign.left, ), ), - SizedBox(height: 10), + SizedBox(height: 10.0), Container( alignment: Alignment.centerLeft, child: Text( "${places[0]["details"]}", style: TextStyle( fontWeight: FontWeight.normal, - fontSize: 15, + fontSize: 15.0, ), textAlign: TextAlign.left, ), ), - SizedBox(height: 10), + SizedBox(height: 10.0), ], ), ], ), - floatingActionButton: FloatingActionButton( child: Icon( Icons.airplanemode_active, ), onPressed: () {}, ), + ); + } -// bottomNavigationBar: Container( -// height: 50, -// child: RaisedButton( -// elevation: 15, -// color: Theme.of(context).primaryColor, -// child: Text( -// "See Availability", -// style: TextStyle( -// color: Theme.of(context).accentColor, -// ), -// ), -// onPressed: (){}, -// ), -// ), + buildSlider() { + return Container( + padding: EdgeInsets.only(left: 20), + height: 250.0, + child: ListView.builder( + scrollDirection: Axis.horizontal, + primary: false, + itemCount: places == null ? 0 : places.length, + itemBuilder: (BuildContext context, int index) { + Map place = places[index]; + + return Padding( + padding: EdgeInsets.only(right: 10.0), + child: ClipRRect( + borderRadius: BorderRadius.circular(10.0), + child: Image.asset( + "${place["img"]}", + height: 250.0, + width: MediaQuery.of(context).size.width - 40.0, + fit: BoxFit.cover, + ), + ), + ); + }, + ), ); } } From afaa19d9b7c754cb08b3b15254b5ef19a6804af0 Mon Sep 17 00:00:00 2001 From: jideguru Date: Sun, 26 Jul 2020 21:21:23 +0100 Subject: [PATCH 3/3] Code cleanup --- pubspec.yaml | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/pubspec.yaml b/pubspec.yaml index 83fbc78..4484343 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -37,11 +37,7 @@ flutter: # To add assets to your application, add an assets section, like this: assets: - - assets/1.jpeg - - assets/2.jpeg - - assets/3.jpeg - - assets/4.jpeg - - assets/5.jpeg + - assets/ # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware. # For details regarding adding assets from package dependencies, see