From 850250efec63fa0cba981ee167f74a374d42e266 Mon Sep 17 00:00:00 2001 From: Stonegate Date: Fri, 1 Jan 2021 14:51:23 +0800 Subject: [PATCH] Minor UI change. --- lib/intro_slider/app_intro.dart | 159 ++++++++++--------------------- lib/intro_slider/fourthpage.dart | 5 +- lib/intro_slider/secondpage.dart | 9 +- lib/intro_slider/thirdpage.dart | 5 +- 4 files changed, 58 insertions(+), 120 deletions(-) diff --git a/lib/intro_slider/app_intro.dart b/lib/intro_slider/app_intro.dart index c4790db..74b3f1b 100644 --- a/lib/intro_slider/app_intro.dart +++ b/lib/intro_slider/app_intro.dart @@ -22,13 +22,13 @@ class SlideIntro extends StatefulWidget { } class _SlideIntroState extends State { - final List _customShadow = [ - BoxShadow(blurRadius: 2, offset: Offset(-2, -2), color: Colors.white54), - BoxShadow( - blurRadius: 8, - offset: Offset(2, 2), - color: Colors.grey[600].withOpacity(0.4)) - ]; + //final List _customShadow = [ + // BoxShadow(blurRadius: 2, offset: Offset(-2, -2), color: Colors.white54), + // BoxShadow( + // blurRadius: 8, + // offset: Offset(2, 2), + // color: Colors.grey[600].withOpacity(0.4)) + //]; PageController _controller; double _position; @override @@ -49,6 +49,28 @@ class _SlideIntroState extends State { super.dispose(); } + Widget _indicatorWidget(int index) { + final distance = (_position - index).abs(); + final size = distance > 1 ? 10.0 : 10 * (2 - distance); + return Center( + child: Container( + alignment: Alignment.center, + child: distance < 0.2 + ? Text( + (index + 1).toString(), + style: TextStyle(color: Color.fromRGBO(35, 204, 198, 1)), + ) + : Center(), + height: size, + width: size, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + ), + ), + ); + } + @override Widget build(BuildContext context) { return AnnotatedRegion( @@ -76,117 +98,35 @@ class _SlideIntroState extends State { left: 0, child: Container( color: Colors.grey[100].withOpacity(0.5), - width: MediaQuery.of(context).size.width, - // alignment: Alignment.center, + width: context.width, padding: EdgeInsets.only(left: 40, right: 20, bottom: 30, top: 20), child: Row( mainAxisSize: MainAxisSize.min, children: [ - Expanded( - child: Container( - alignment: Alignment.centerLeft, - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Container( - alignment: Alignment.center, - child: _position < 0.2 - ? Text( - '1', - style: TextStyle( - color: Color.fromRGBO( - 35, 204, 198, 1)), - ) - : Center(), - margin: EdgeInsets.symmetric(horizontal: 10), - height: _position > 1 - ? 10 - : (1 - _position) * 10 + 10, - width: _position > 1 - ? 10 - : (1 - _position) * 10 + 10, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: _customShadow), - ), - Container( - child: _position < 1.2 && _position > 0.8 - ? Text('2', - style: TextStyle( - color: Color.fromRGBO( - 77, 145, 190, 1))) - : Center(), - alignment: Alignment.center, - margin: EdgeInsets.symmetric(horizontal: 10), - height: _position > 2 - ? 10 - : 20 - (_position - 1).abs() * 10, - width: _position > 2 - ? 10 - : 20 - (_position - 1).abs() * 10, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: _customShadow), - ), - Container( - child: _position < 2.2 && _position > 1.8 - ? Text('3', - style: TextStyle( - color: Color.fromRGBO( - 35, 204, 198, 1))) - : Center(), - alignment: Alignment.center, - margin: EdgeInsets.symmetric(horizontal: 10), - height: _position < 1 - ? 10 - : 20 - (_position - 2).abs() * 10, - width: _position < 1 - ? 10 - : 20 - (_position - 2).abs() * 10, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: _customShadow), - ), - Container( - child: _position > 2.8 - ? Text( - '4', - style: TextStyle( - color: Color.fromRGBO( - 77, 145, 190, 1)), - ) - : Center(), - alignment: Alignment.center, - margin: EdgeInsets.symmetric(horizontal: 10), - height: _position < 2 - ? 10 - : 20 - (3 - _position) * 10, - width: _position < 2 - ? 10 - : 20 - (3 - _position) * 10, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: _customShadow), - ), - ], - ), + SizedBox( + width: context.width / 3, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + _indicatorWidget(0), + _indicatorWidget(1), + _indicatorWidget(2), + _indicatorWidget(3) + ], ), ), + Spacer(), Container( alignment: Alignment.center, height: 40, width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: Colors.white), - borderRadius: BorderRadius.all(Radius.circular(20)), + borderRadius: BorderRadius.circular(20), color: Colors.white, - boxShadow: _customShadow, + //boxShadow: _customShadow, ), child: Material( color: Colors.transparent, @@ -204,10 +144,11 @@ class _SlideIntroState extends State { child: Center( child: Text(context.s.next, style: TextStyle( - color: Colors.black))))) + color: Colors.black, + fontWeight: + FontWeight.bold))))) : InkWell( - borderRadius: - BorderRadius.all(Radius.circular(20)), + borderRadius: BorderRadius.circular(20), onTap: () { if (widget.goto == Goto.home) { Navigator.push(context, @@ -225,7 +166,9 @@ class _SlideIntroState extends State { child: Center( child: Text(context.s.done, style: TextStyle( - color: Colors.black))))), + color: Colors.black, + fontWeight: + FontWeight.bold))))), ), ), ], diff --git a/lib/intro_slider/fourthpage.dart b/lib/intro_slider/fourthpage.dart index c5fe77c..8506480 100644 --- a/lib/intro_slider/fourthpage.dart +++ b/lib/intro_slider/fourthpage.dart @@ -22,15 +22,14 @@ class _FourthPageState extends State { Container( height: 200, alignment: Alignment.center, - padding: EdgeInsets.all(40), + padding: EdgeInsets.fromLTRB(40, context.paddingTop + 20, 40, 20), child: Text( context.s.introFourthPage, style: TextStyle(fontSize: 30, color: Colors.white), ), ), - Container( + SizedBox( height: context.width * 3 / 4, - // color: Colors.red, child: FlareActor( 'assets/longtap.flr', alignment: Alignment.center, diff --git a/lib/intro_slider/secondpage.dart b/lib/intro_slider/secondpage.dart index 026aa01..9750af4 100644 --- a/lib/intro_slider/secondpage.dart +++ b/lib/intro_slider/secondpage.dart @@ -17,21 +17,19 @@ class _SecondPageState extends State { child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.start, children: [ Container( height: 200, alignment: Alignment.center, - padding: - EdgeInsets.only(top: 20, bottom: 20, left: 40, right: 40), + padding: EdgeInsets.fromLTRB(40, context.paddingTop + 20, 40, 20), child: Text( context.s.introSecondPage, style: TextStyle(fontSize: 30, color: Colors.white), ), ), - Container( + SizedBox( height: context.width * 3 / 4, - // color: Colors.red, child: FlareActor( 'assets/add.flr', isPaused: false, @@ -39,7 +37,6 @@ class _SecondPageState extends State { animation: 'add', fit: BoxFit.cover, )), - Spacer(), ], ), ), diff --git a/lib/intro_slider/thirdpage.dart b/lib/intro_slider/thirdpage.dart index 1d247e2..24ce293 100644 --- a/lib/intro_slider/thirdpage.dart +++ b/lib/intro_slider/thirdpage.dart @@ -22,15 +22,14 @@ class _ThirdPageState extends State { Container( height: 200, alignment: Alignment.center, - padding: EdgeInsets.all(40), + padding: EdgeInsets.fromLTRB(40, context.paddingTop + 20, 40, 20), child: Text( context.s.introThirdPage, style: TextStyle(fontSize: 30, color: Colors.white), ), ), - Container( + SizedBox( height: context.width * 3 / 4, - // color: Colors.red, child: FlareActor( 'assets/swipe.flr', alignment: Alignment.center,