From 29d77486b9fefafe4b77af021c67b98bb125a381 Mon Sep 17 00:00:00 2001 From: johnny Date: Sun, 16 Aug 2020 10:36:27 +1000 Subject: [PATCH] refactored bottom sheet and area cards, now usable components --- lib/components/area_update_card.dart | 75 ++++++++++++++ lib/components/bottom_sheet.dart | 146 ++++++++------------------- lib/data/area_update_card_lists.dart | 20 ++++ lib/screens/home_screen.dart | 10 +- 4 files changed, 148 insertions(+), 103 deletions(-) create mode 100644 lib/components/area_update_card.dart create mode 100644 lib/data/area_update_card_lists.dart diff --git a/lib/components/area_update_card.dart b/lib/components/area_update_card.dart new file mode 100644 index 0000000..276e2a2 --- /dev/null +++ b/lib/components/area_update_card.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; + +class AreaUpdateCard extends StatelessWidget { + /* + Original values + color: Green.shade500 + textOne: RFS has successfuly responded and + textTwo: put out the small fire at 5:00pm + icon: FontAwesomeIcons.checkCircle + */ + + String title; + String textOne; + String textTwo; + Color color; + IconData icon; + + AreaUpdateCard({ + this.title, + this.textOne, + this.textTwo, + this.color, + this.icon, + }); + + @override + Widget build(BuildContext context) { + return Card( + child: ClipRRect( + borderRadius: BorderRadius.circular(12), + child: Container( + width: 320, + height: 80, + color: color, + child: Row( + children: [ + Container( + margin: EdgeInsets.only(left: 8), + child: FaIcon( + icon, + color: Colors.white, + size: 40, + ), + ), + Container( + margin: EdgeInsets.only(left: 8), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Text( + title, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Colors.white), + ), + Text( + textOne, + style: TextStyle(color: Colors.white), + ), + Text( + textTwo, + style: TextStyle(color: Colors.white), + ), + ], + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/components/bottom_sheet.dart b/lib/components/bottom_sheet.dart index 4c16b26..af5c06c 100644 --- a/lib/components/bottom_sheet.dart +++ b/lib/components/bottom_sheet.dart @@ -1,10 +1,29 @@ import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; +import 'area_update_card.dart'; + +//initial values +// "https://www.nationalparks.nsw.gov.au/-/media/npws/images/parks/gundabooka-national-park/little-mountain-walking-track/little-mountain-track-01.jpg" +// Sydney +// 124 +// none class CustomBottomSheet extends StatelessWidget { - const CustomBottomSheet({ - Key key, - }) : super(key: key); + String location; + String imageURL; + bool isSafe; + String rfsResponse; + String reports; + List areaUpdateCardsList; + + CustomBottomSheet({ + this.imageURL, + this.reports, + this.location, + this.isSafe, + this.rfsResponse, + this.areaUpdateCardsList, + }); @override Widget build(BuildContext context) { @@ -16,15 +35,14 @@ class CustomBottomSheet extends StatelessWidget { children: [ ClipRRect( borderRadius: BorderRadius.circular(12.0), - child: Image.network( - "https://www.nationalparks.nsw.gov.au/-/media/npws/images/parks/gundabooka-national-park/little-mountain-walking-track/little-mountain-track-01.jpg"), + child: Image.network(imageURL), ), Container( margin: EdgeInsets.only(left: 12), child: Column( children: [ Text( - "SYDNEY", + location, style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold), ), SizedBox(height: 12), @@ -38,9 +56,10 @@ class CustomBottomSheet extends StatelessWidget { ), ), Text( - "SAFE", + isSafe ? "SAFE" : "DANGER", style: TextStyle( - fontSize: 20, color: Colors.green.shade500), + fontSize: 20, + color: isSafe ? Colors.green.shade500 : Colors.red), ), ], ), @@ -55,7 +74,7 @@ class CustomBottomSheet extends StatelessWidget { ), ), Text( - "124", + reports, style: TextStyle( fontSize: 20, ), @@ -84,26 +103,22 @@ class CustomBottomSheet extends StatelessWidget { Column( children: [ Text("Latest Area Updates"), - ClipRRect( - borderRadius: BorderRadius.circular(12), - child: AreaUpdateCard( - title: "Area now declared SAFE", - color: Colors.green.shade500, - textOne: "RFS has successfuly responded and", - textTwo: "put out the small fire at 5:00pm", - icon: FontAwesomeIcons.checkCircle, - ), - ), - SizedBox( - height: 15, - ), - AreaUpdateCard( - title: "Area now declared DANGEROUS", - textOne: "RFS Alerted to the scene", - textTwo: "mild fire ", - icon: FontAwesomeIcons.bell, - color: Colors.red.shade700, - ), + SizedBox(height: 15), + ListView.builder( + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: areaUpdateCardsList.length, + itemBuilder: (context, index) { + return (Column( + children: [ + areaUpdateCardsList[index], + SizedBox( + height: 12, + ) + ], + )); + }, + ) ], ), ], @@ -115,76 +130,3 @@ class CustomBottomSheet extends StatelessWidget { ); } } - -class AreaUpdateCard extends StatelessWidget { - /* - Original values - color: Green.shade500 - textOne: RFS has successfuly responded and - textTwo: put out the small fire at 5:00pm - icon: FontAwesomeIcons.checkCircle - */ - - String title; - String textOne; - String textTwo; - Color color; - IconData icon; - - AreaUpdateCard({ - this.title, - this.textOne, - this.textTwo, - this.color, - this.icon, - }); - - @override - Widget build(BuildContext context) { - return Card( - child: ClipRRect( - borderRadius: BorderRadius.circular(12), - child: Container( - width: 320, - height: 80, - color: color, - child: Row( - children: [ - Container( - margin: EdgeInsets.only(left: 8), - child: FaIcon( - icon, - color: Colors.white, - size: 40, - ), - ), - Container( - margin: EdgeInsets.only(left: 8), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - title, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.w600, - color: Colors.white), - ), - Text( - textOne, - style: TextStyle(color: Colors.white), - ), - Text( - textTwo, - style: TextStyle(color: Colors.white), - ), - ], - ), - ), - ], - ), - ), - ), - ); - } -} diff --git a/lib/data/area_update_card_lists.dart b/lib/data/area_update_card_lists.dart new file mode 100644 index 0000000..878461b --- /dev/null +++ b/lib/data/area_update_card_lists.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; +import 'package:signal_flutter_v2/components/area_update_card.dart'; + +final sydney = [ + AreaUpdateCard( + title: "Area now declared SAFE", + color: Colors.green.shade500, + textOne: "RFS has successfuly responded and", + textTwo: "put out the small fire at 5:00pm", + icon: FontAwesomeIcons.checkCircle, + ), + AreaUpdateCard( + title: "Area now declared DANGEROUS", + textOne: "RFS Alerted to the scene", + textTwo: "mild fire ", + icon: FontAwesomeIcons.bell, + color: Colors.red.shade700, + ), +]; diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart index a4feba2..1b18060 100644 --- a/lib/screens/home_screen.dart +++ b/lib/screens/home_screen.dart @@ -4,6 +4,7 @@ import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:modal_bottom_sheet/modal_bottom_sheet.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:signal_flutter_v2/components/bottom_sheet.dart'; +import 'package:signal_flutter_v2/data/area_update_card_lists.dart'; //REMOVE THIS GOOGLE_MAPS_API_KEY = 'AIzaSyAr31utYalU_q4_Lh1GtqZrCDgg0VBlcHI' @@ -43,7 +44,14 @@ class _HomeScreenState extends State { return Opacity( opacity: 0.8, child: Scaffold( - body: CustomBottomSheet(), + body: CustomBottomSheet( + location: "Sydney", + reports: "124", + isSafe: true, + rfsResponse: "none", + areaUpdateCardsList: sydney, + imageURL: + "https://www.nationalparks.nsw.gov.au/-/media/npws/images/parks/gundabooka-national-park/little-mountain-walking-track/little-mountain-track-01.jpg"), ), ); });