michael/furman_now
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update pull down gesture to be much smoother, refactor home page routing, load weather from OpenWeatherMap

Browse Source
This commit is contained in:
Michael Thomas
2022-09-11 12:39:48 -04:00
parent 9b78ae40d0
commit 1e5382e8f1
12 changed files with 396 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
lib/src/screens/home/content.dart Normal file
View File

@@ -0,0 +1,107 @@
import 'package:flutter/material.dart';
import 'package:furman_now/src/routes/index.gr.dart';
import 'package:furman_now/src/utils/conditional_parent_widget.dart';
import 'package:furman_now/src/widgets/events/events_list.dart';
import 'package:furman_now/src/widgets/header.dart';
import 'package:furman_now/src/widgets/home/restaurants/restaurants_list.dart';
import 'package:furman_now/src/widgets/home/transportation/transportation_card.dart';
import 'package:furman_now/src/widgets/scroll_view_height.dart';
class HomeContent extends StatefulWidget {
final bool collapse;
const HomeContent({
required this.collapse,
Key? key,
}) : super(key: key);
@override
State<HomeContent> createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent> {
final ScrollController _controller = ScrollController();
bool _collapse = false;
@override
Widget build(BuildContext context) {
if (widget.collapse != _collapse) {
_controller.animateTo(
0,
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
);
_collapse = widget.collapse;
}
return LayoutBuilder(
builder: (context, constraints) => ScrollViewWithHeight(
controller: _controller,
child: Align(
alignment: Alignment.bottomCenter,
child: TweenAnimationBuilder<double>(
tween: widget.collapse
? Tween<double>(begin: 200, end: constraints.maxHeight - 75)
: Tween<double>(begin: constraints.maxHeight - 75, end: 200),
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 200),
builder: (context, margin, _) => Stack(
children: [
Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.vertical(top: Radius.circular(30)),
),
padding: const EdgeInsets.only(bottom: 15),
margin: EdgeInsets.only(top: margin),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 300),
height: widget.collapse ? 55 : 0,
child: Align(
alignment: Alignment.topCenter,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 15),
width: 60,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
)
),
),
),
const SizedBox(height: 20),
const HeaderWidget(
title: "Today's Events",
link: HeaderLink(
text: "View more",
href: EventsRoute()
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: EventsList(),
),
const HeaderWidget(title: "Food & Dining"),
const RestaurantsList(),
const HeaderWidget(title: "Transportation"),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: TransportationCard(),
),
],
),
),
]
),
),
),
),
);
}
}

92
lib/src/screens/home/home_header.dart Normal file
View File

@@ -0,0 +1,92 @@
import 'package:flutter/material.dart';
import 'package:furman_now/src/screens/home/state.dart';
import 'package:furman_now/src/services/weather/weather_service.dart';
import 'package:furman_now/src/utils/greeting.dart';
import 'package:furman_now/src/utils/theme.dart';
import 'package:provider/provider.dart';
class HomePageHeader extends StatelessWidget {
const HomePageHeader({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 300,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Color(0xffb7acc9),
Color(0xffb7acc9),
],
tileMode: TileMode.mirror,
),
),
child: Align(
alignment: Alignment.topLeft,
child: Container(
padding: const EdgeInsets.all(40),
width: double.infinity,
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Hero(
tag: "title",
child: Material(
type: MaterialType.transparency,
child: Text(
"${greeting()},\nMichael",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 36,
fontWeight: FontWeight.w800,
)),
),
),
),
const SizedBox(height: 8),
Consumer<HomePageState>(
builder: (context, state, _) => AnimatedCrossFade(
crossFadeState:
state.showScrollMessage
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 100),
firstChild: FutureBuilder<String>(
future: WeatherService.getWeatherMessage(),
builder: (context, snapshot) {
if(snapshot.hasData) {
return Text(
snapshot.data!,
// "It's 76º and partly cloudy",
style: furmanTextStyle(const TextStyle
(
color: Color(0xff26183d),
fontSize: 16,
fontWeight: FontWeight.w500,
)),
);
}
return const SizedBox(height: 0);
}
),
secondChild: Text("Pull down to view your Meal ID",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 16,
fontWeight: FontWeight.w500
)),
),
),
),
],
),
),
),
);
}
}

204
lib/src/screens/home/index.dart
View File

@@ -1,13 +1,9 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:furman_now/src/routes/index.gr.dart';
import 'package:furman_now/src/utils/greeting.dart';
import 'package:furman_now/src/utils/theme.dart';
import 'package:furman_now/src/widgets/header.dart';
import 'package:furman_now/src/widgets/events/events_list.dart';
import 'package:furman_now/src/widgets/home/restaurants/restaurants_list.dart';
import 'package:furman_now/src/widgets/home/transportation/transportation_card.dart';
import 'package:furman_now/src/widgets/scroll_view_height.dart';
import 'package:furman_now/src/screens/home/content.dart';
import 'package:furman_now/src/screens/home/state.dart';
import 'package:provider/provider.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@@ -17,151 +13,71 @@ class HomeScreen extends StatefulWidget {
}
class _HomeScreenState extends State<HomeScreen> {
CrossFadeState _showScrollMessage = CrossFadeState.showFirst;
bool _collapse = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color(0xffb7acc9),
child: SafeArea(
child: Container(
color: Colors.grey[100],
child: Stack(
fit: StackFit.loose,
children: [
Container(
width: double.infinity,
height: 300,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Color(0xffb7acc9),
Color(0xffb7acc9),
],
tileMode: TileMode.mirror,
),
return ChangeNotifierProvider(
create: (context) => HomePageState(),
builder: (context, _) => Scaffold(
body: Container(
color: const Color(0xffb7acc9),
child: SafeArea(
child: Container(
color: const Color(0xffb7acc9),
child: Stack(
fit: StackFit.loose,
children: [
const AutoTabsRouter(
routes: [
HomeRoute(),
StudentIdRoute(),
],
),
child: Align(
alignment: Alignment.topLeft,
child: Container(
padding: const EdgeInsets.all(40),
width: double.infinity,
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Hero(
tag: "title",
child: Material(
type: MaterialType.transparency,
child: Text(
"${greeting()},\nMichael",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 36,
fontWeight: FontWeight.w800,
)),
),
),
),
const SizedBox(height: 5),
AnimatedCrossFade(
crossFadeState: _showScrollMessage,
duration: const Duration(milliseconds: 100),
firstChild: Text("It's 76º and partly cloudy",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 16,
fontWeight: FontWeight.w500)
),
),
secondChild: Text("Pull down to view your Meal ID",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 16,
fontWeight: FontWeight.w500)
),
),
),
],
),
),
),
),
NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollUpdateNotification) {
final offset = notification.metrics.pixels;
if (offset < 0) {
var offsetAmount = offset.abs();
if (offsetAmount > 50) {
context.router.navigate(const StudentIdRoute());
} else if (offsetAmount > 20) {
setState(() {
_showScrollMessage = CrossFadeState.showSecond;
});
NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollUpdateNotification) {
final offset = notification.metrics.pixels;
const scrollMessageSensitivity = 20;
const pageSwitchSensitivity = 60;
if (offset < 0) {
var offsetAmount = offset.abs();
if (offsetAmount > pageSwitchSensitivity) {
context.router.navigate(const StudentIdRoute());
setState(() {
_collapse = true;
});
} else if (offsetAmount > scrollMessageSensitivity) {
if (!context.read<HomePageState>().showScrollMessage) {
context.read<HomePageState>().showScrollMessage = true;
}
} else {
if (context.read<HomePageState>().showScrollMessage) {
context.read<HomePageState>().showScrollMessage = false;
}
}
} else {
setState(() {
_showScrollMessage = CrossFadeState.showFirst;
});
}
} else {
if (_showScrollMessage != CrossFadeState.showFirst) {
setState(() {
_showScrollMessage = CrossFadeState.showFirst;
});
var offsetAmount = offset.abs();
if (offsetAmount > pageSwitchSensitivity) {
context.router.navigate(const HomeRoute());
setState(() {
_collapse = false;
});
} else {
if (context.read<HomePageState>().showScrollMessage) {
context.read<HomePageState>().showScrollMessage = false;
}
}
}
}
}
return true;
},
child: ScrollViewWithHeight(
child: Hero(
tag: "card",
child: Material(
type: MaterialType.transparency,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.vertical(top: Radius.circular(30)),
),
padding: const EdgeInsets.symmetric(vertical: 20),
margin: const EdgeInsets.only(top: 200),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const HeaderWidget(
title: "Today's Events",
link: HeaderLink(
text: "View more",
href: EventsRoute()
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: EventsList(),
),
const HeaderWidget(title: "Food & Dining"),
const RestaurantsList(),
const HeaderWidget(title: "Transportation"),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: TransportationCard(),
),
],
),
),
),
),
return true;
},
child: ClipRect(child: HomeContent(
collapse: _collapse,
)),
),
),
],
],
),
),
),
),

14
lib/src/screens/home/state.dart Normal file
View File

@@ -0,0 +1,14 @@
import 'package:flutter/material.dart';
class HomePageState extends ChangeNotifier {
bool _showScrollMessage = false;
bool get showScrollMessage {
return _showScrollMessage;
}
set showScrollMessage(bool value) {
_showScrollMessage = value;
notifyListeners();
}
}

53
lib/src/screens/student_id/index.dart
View File

@@ -50,7 +50,7 @@ class _StudentIdScreenState extends State<StudentIdScreen> {
if (details.delta.dy > sensitivity) {
// Down Swipe
} else if (details.delta.dy < -sensitivity) {
context.router.navigate(const HomeRoute());
context.router.navigate(HomeRoute());
}
},
child: Stack(
@@ -61,19 +61,13 @@ class _StudentIdScreenState extends State<StudentIdScreen> {
child: ListView(
padding: const EdgeInsets.all(40),
children: [
Hero(
tag: "title",
child: Material(
type: MaterialType.transparency,
child: Text(
"Furman ID",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 36,
fontWeight: FontWeight.w800
)),
),
),
Text(
"Furman ID",
style: furmanTextStyle(const TextStyle(
color: Color(0xff26183d),
fontSize: 36,
fontWeight: FontWeight.w800
)),
),
const SizedBox(height: 30),
Center(
@@ -131,37 +125,6 @@ class _StudentIdScreenState extends State<StudentIdScreen> {
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Hero(
tag: "card",
child: Material(
type: MaterialType.transparency,
child: Container(
height: 75,
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
),
child: Align(
alignment: Alignment.topCenter,
child: Container(
margin: const EdgeInsets.only(top: 10),
width: 40,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(20),
)
),
),
),
),
),
),
],
),
),