design edits + bug fixed + page transition
This commit is contained in:
parent
7f23eb46c8
commit
04150fe125
|
|
@ -4,7 +4,7 @@ import 'package:didvan/pages/home/profile/profile.dart';
|
||||||
import 'package:didvan/pages/home/radar/radar.dart';
|
import 'package:didvan/pages/home/radar/radar.dart';
|
||||||
import 'package:didvan/pages/home/radar/radar_state.dart';
|
import 'package:didvan/pages/home/radar/radar_state.dart';
|
||||||
import 'package:didvan/pages/home/statistics/statistics.dart';
|
import 'package:didvan/pages/home/statistics/statistics.dart';
|
||||||
import 'package:didvan/pages/home/studio/studio..dart';
|
import 'package:didvan/pages/home/studio/studio.dart';
|
||||||
import 'package:didvan/pages/home/widgets/didvan_bnb.dart';
|
import 'package:didvan/pages/home/widgets/didvan_bnb.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
|
|
|
||||||
|
|
@ -22,29 +22,7 @@ class _RadarState extends State<Radar> {
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
_scrollController.addListener(() async {
|
_scrollController.addListener(() async {
|
||||||
if (_isAnimating) return;
|
_handleAnimations();
|
||||||
final double position = _scrollController.position.pixels;
|
|
||||||
if (position > 5 && !_isColapsed) {
|
|
||||||
_isColapsed = true;
|
|
||||||
setState(() {});
|
|
||||||
_isAnimating = true;
|
|
||||||
await _scrollController.animateTo(
|
|
||||||
380,
|
|
||||||
duration: DesignConfig.mediumAnimationDuration,
|
|
||||||
curve: Curves.ease,
|
|
||||||
);
|
|
||||||
_isAnimating = false;
|
|
||||||
} else if (position < 380 && _isColapsed) {
|
|
||||||
_isColapsed = false;
|
|
||||||
setState(() {});
|
|
||||||
_isAnimating = true;
|
|
||||||
await _scrollController.animateTo(
|
|
||||||
0,
|
|
||||||
duration: DesignConfig.mediumAnimationDuration,
|
|
||||||
curve: Curves.ease,
|
|
||||||
);
|
|
||||||
_isAnimating = false;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
super.initState();
|
super.initState();
|
||||||
}
|
}
|
||||||
|
|
@ -103,4 +81,30 @@ class _RadarState extends State<Radar> {
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void _handleAnimations() async {
|
||||||
|
if (_isAnimating) return;
|
||||||
|
final double position = _scrollController.position.pixels;
|
||||||
|
if (position > 5 && !_isColapsed) {
|
||||||
|
_isColapsed = true;
|
||||||
|
setState(() {});
|
||||||
|
_isAnimating = true;
|
||||||
|
await _scrollController.animateTo(
|
||||||
|
380,
|
||||||
|
duration: DesignConfig.mediumAnimationDuration,
|
||||||
|
curve: Curves.ease,
|
||||||
|
);
|
||||||
|
_isAnimating = false;
|
||||||
|
} else if (position < 380 && _isColapsed) {
|
||||||
|
_isColapsed = false;
|
||||||
|
setState(() {});
|
||||||
|
_isAnimating = true;
|
||||||
|
await _scrollController.animateTo(
|
||||||
|
0,
|
||||||
|
duration: DesignConfig.mediumAnimationDuration,
|
||||||
|
curve: Curves.ease,
|
||||||
|
);
|
||||||
|
_isAnimating = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,59 @@ import 'package:didvan/config/design_config.dart';
|
||||||
import 'package:didvan/constants/app_icons.dart';
|
import 'package:didvan/constants/app_icons.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
class SearchField extends StatelessWidget {
|
class SearchField extends StatefulWidget {
|
||||||
const SearchField({Key? key}) : super(key: key);
|
const SearchField({Key? key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<SearchField> createState() => _SearchFieldState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _SearchFieldState extends State<SearchField> {
|
||||||
|
final FocusNode _focusNode = FocusNode();
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
_focusNode.addListener(() {
|
||||||
|
setState(() {});
|
||||||
|
});
|
||||||
|
super.initState();
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return Container(
|
||||||
height: 40,
|
height: 40,
|
||||||
width: double.infinity,
|
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Theme.of(context).colorScheme.surface,
|
color: _fillColor(),
|
||||||
),
|
),
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
const Icon(
|
|
||||||
DidvanIcons.search_regular,
|
|
||||||
),
|
|
||||||
Expanded(
|
|
||||||
child: TextField(
|
child: TextField(
|
||||||
|
focusNode: _focusNode,
|
||||||
style: Theme.of(context).textTheme.bodyText1,
|
style: Theme.of(context).textTheme.bodyText1,
|
||||||
textAlignVertical: TextAlignVertical.top,
|
textAlignVertical: TextAlignVertical.center,
|
||||||
onChanged: (value) {},
|
onChanged: (value) {},
|
||||||
keyboardType: TextInputType.text,
|
keyboardType: TextInputType.text,
|
||||||
textInputAction: TextInputAction.search,
|
textInputAction: TextInputAction.search,
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
|
focusedBorder: OutlineInputBorder(
|
||||||
|
borderRadius: const BorderRadius.all(
|
||||||
|
Radius.circular(4),
|
||||||
|
),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: Theme.of(context).primaryColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
prefixIcon: const Icon(
|
||||||
|
DidvanIcons.search_regular,
|
||||||
|
),
|
||||||
|
enabledBorder: const OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.all(
|
||||||
|
Radius.circular(4),
|
||||||
|
),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: DesignConfig.greyColor4,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
fillColor: Colors.red,
|
||||||
contentPadding: const EdgeInsets.only(
|
contentPadding: const EdgeInsets.only(
|
||||||
left: 12,
|
left: 12,
|
||||||
right: 12,
|
right: 12,
|
||||||
|
|
@ -39,9 +68,13 @@ class SearchField extends StatelessWidget {
|
||||||
.copyWith(color: DesignConfig.greyColor5),
|
.copyWith(color: DesignConfig.greyColor5),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Color _fillColor() {
|
||||||
|
if (_focusNode.hasFocus) {
|
||||||
|
return DesignConfig.lightPrimaryColor3;
|
||||||
|
}
|
||||||
|
return Theme.of(context).colorScheme.surface;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ class DidvanBNB extends StatelessWidget {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return Container(
|
||||||
height: 64,
|
height: 72,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Theme.of(context).colorScheme.surface,
|
color: Theme.of(context).colorScheme.surface,
|
||||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import 'package:didvan/config/design_config.dart';
|
||||||
import 'package:didvan/routes/routes.dart';
|
import 'package:didvan/routes/routes.dart';
|
||||||
import 'package:didvan/widgets/logos/didvan_horizontal_logo.dart';
|
import 'package:didvan/widgets/logos/didvan_horizontal_logo.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/services.dart';
|
||||||
|
|
||||||
class Splash extends StatefulWidget {
|
class Splash extends StatefulWidget {
|
||||||
const Splash({Key? key}) : super(key: key);
|
const Splash({Key? key}) : super(key: key);
|
||||||
|
|
@ -24,10 +25,15 @@ class _SplashState extends State<Splash> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return AnnotatedRegion<SystemUiOverlayStyle>(
|
||||||
|
value: DesignConfig.systemUIOverlayStyle.copyWith(
|
||||||
|
systemNavigationBarColor: DesignConfig.lightPrimaryColor3,
|
||||||
|
),
|
||||||
|
child: Container(
|
||||||
padding: const EdgeInsets.all(60),
|
padding: const EdgeInsets.all(60),
|
||||||
color: DesignConfig.lightColorScheme.background,
|
color: DesignConfig.lightPrimaryColor3,
|
||||||
child: const DidvanVerticalLogo(),
|
child: const DidvanVerticalLogo(),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
|
import 'package:didvan/config/design_config.dart';
|
||||||
import 'package:didvan/pages/authentication/authentication.dart';
|
import 'package:didvan/pages/authentication/authentication.dart';
|
||||||
import 'package:didvan/pages/authentication/authentication_state.dart';
|
import 'package:didvan/pages/authentication/authentication_state.dart';
|
||||||
import 'package:didvan/pages/home/home.dart';
|
import 'package:didvan/pages/home/home.dart';
|
||||||
import 'package:didvan/pages/home/home_state.dart';
|
import 'package:didvan/pages/home/home_state.dart';
|
||||||
import 'package:didvan/pages/home/radar/radar.dart';
|
|
||||||
import 'package:didvan/pages/home/radar/radar_state.dart';
|
|
||||||
import 'package:didvan/pages/splash/splash.dart';
|
import 'package:didvan/pages/splash/splash.dart';
|
||||||
import 'package:didvan/pages/splash/splash_state.dart';
|
import 'package:didvan/pages/splash/splash_state.dart';
|
||||||
import 'package:didvan/routes/routes.dart';
|
import 'package:didvan/routes/routes.dart';
|
||||||
|
|
@ -14,21 +13,21 @@ class RouteGenerator {
|
||||||
static Route<dynamic> generateRoute(RouteSettings settings) {
|
static Route<dynamic> generateRoute(RouteSettings settings) {
|
||||||
switch (settings.name) {
|
switch (settings.name) {
|
||||||
case Routes.splash:
|
case Routes.splash:
|
||||||
return _materialPageRouteGenerator(
|
return _createRoute(
|
||||||
ChangeNotifierProvider<SplashState>(
|
ChangeNotifierProvider<SplashState>(
|
||||||
create: (context) => SplashState(),
|
create: (context) => SplashState(),
|
||||||
child: const Splash(),
|
child: const Splash(),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
case Routes.authenticaion:
|
case Routes.authenticaion:
|
||||||
return _materialPageRouteGenerator(
|
return _createRoute(
|
||||||
ChangeNotifierProvider<AuthenticationState>(
|
ChangeNotifierProvider<AuthenticationState>(
|
||||||
create: (context) => AuthenticationState(),
|
create: (context) => AuthenticationState(),
|
||||||
child: const Authentication(),
|
child: const Authentication(),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
case Routes.home:
|
case Routes.home:
|
||||||
return _materialPageRouteGenerator(
|
return _createRoute(
|
||||||
ChangeNotifierProvider<HomeState>(
|
ChangeNotifierProvider<HomeState>(
|
||||||
create: (context) => HomeState(),
|
create: (context) => HomeState(),
|
||||||
child: const Home(),
|
child: const Home(),
|
||||||
|
|
@ -52,7 +51,13 @@ class RouteGenerator {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
static _materialPageRouteGenerator(pageWidget) => MaterialPageRoute(
|
static Route _createRoute(page) {
|
||||||
builder: (context) => pageWidget,
|
return PageRouteBuilder(
|
||||||
|
pageBuilder: (context, animation, secondaryAnimation) => page,
|
||||||
|
transitionDuration: DesignConfig.mediumAnimationDuration,
|
||||||
|
transitionsBuilder: (context, animation, secondaryAnimation, child) {
|
||||||
|
return FadeTransition(opacity: animation, child: child);
|
||||||
|
},
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
|
import 'package:didvan/config/design_config.dart';
|
||||||
import 'package:didvan/constants/assets.dart';
|
import 'package:didvan/constants/assets.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/services.dart';
|
||||||
import 'package:rive/rive.dart';
|
import 'package:rive/rive.dart';
|
||||||
|
|
||||||
class ActionSheetUtils {
|
class ActionSheetUtils {
|
||||||
|
|
@ -8,12 +10,23 @@ class ActionSheetUtils {
|
||||||
static Future<void> showLogoLoadingIndicator() async {
|
static Future<void> showLogoLoadingIndicator() async {
|
||||||
await showDialog(
|
await showDialog(
|
||||||
context: context,
|
context: context,
|
||||||
builder: (context) => Padding(
|
builder: (context) => _customSystemOverlayStyle(
|
||||||
|
child: Padding(
|
||||||
padding: EdgeInsets.symmetric(
|
padding: EdgeInsets.symmetric(
|
||||||
horizontal: MediaQuery.of(context).size.width / 3,
|
horizontal: MediaQuery.of(context).size.width / 3,
|
||||||
),
|
),
|
||||||
child: const RiveAnimation.asset(Assets.logoLoadingAnimation),
|
child: const RiveAnimation.asset(Assets.logoLoadingAnimation),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
static AnnotatedRegion _customSystemOverlayStyle({required Widget child}) {
|
||||||
|
return AnnotatedRegion<SystemUiOverlayStyle>(
|
||||||
|
value: DesignConfig.systemUIOverlayStyle.copyWith(
|
||||||
|
systemNavigationBarColor: Colors.black45,
|
||||||
|
),
|
||||||
|
child: child,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue