Minor UI change.

This commit is contained in:
Stonegate 2021-01-01 14:51:23 +08:00
parent 0fdf9aac9d
commit 850250efec
4 changed files with 58 additions and 120 deletions

View File

@ -22,13 +22,13 @@ class SlideIntro extends StatefulWidget {
} }
class _SlideIntroState extends State<SlideIntro> { class _SlideIntroState extends State<SlideIntro> {
final List<BoxShadow> _customShadow = [ //final List<BoxShadow> _customShadow = [
BoxShadow(blurRadius: 2, offset: Offset(-2, -2), color: Colors.white54), // BoxShadow(blurRadius: 2, offset: Offset(-2, -2), color: Colors.white54),
BoxShadow( // BoxShadow(
blurRadius: 8, // blurRadius: 8,
offset: Offset(2, 2), // offset: Offset(2, 2),
color: Colors.grey[600].withOpacity(0.4)) // color: Colors.grey[600].withOpacity(0.4))
]; //];
PageController _controller; PageController _controller;
double _position; double _position;
@override @override
@ -49,6 +49,28 @@ class _SlideIntroState extends State<SlideIntro> {
super.dispose(); 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>( return AnnotatedRegion<SystemUiOverlayStyle>(
@ -76,117 +98,35 @@ class _SlideIntroState extends State<SlideIntro> {
left: 0, left: 0,
child: Container( child: Container(
color: Colors.grey[100].withOpacity(0.5), color: Colors.grey[100].withOpacity(0.5),
width: MediaQuery.of(context).size.width, width: context.width,
// alignment: Alignment.center,
padding: padding:
EdgeInsets.only(left: 40, right: 20, bottom: 30, top: 20), EdgeInsets.only(left: 40, right: 20, bottom: 30, top: 20),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
Expanded( SizedBox(
child: Container( width: context.width / 3,
alignment: Alignment.centerLeft, child: Row(
child: Row( crossAxisAlignment: CrossAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
children: <Widget>[ _indicatorWidget(0),
Container( _indicatorWidget(1),
alignment: Alignment.center, _indicatorWidget(2),
child: _position < 0.2 _indicatorWidget(3)
? 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),
),
],
),
), ),
), ),
Spacer(),
Container( Container(
alignment: Alignment.center, alignment: Alignment.center,
height: 40, height: 40,
width: 80, width: 80,
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.white), border: Border.all(width: 1, color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.circular(20),
color: Colors.white, color: Colors.white,
boxShadow: _customShadow, //boxShadow: _customShadow,
), ),
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
@ -204,10 +144,11 @@ class _SlideIntroState extends State<SlideIntro> {
child: Center( child: Center(
child: Text(context.s.next, child: Text(context.s.next,
style: TextStyle( style: TextStyle(
color: Colors.black))))) color: Colors.black,
fontWeight:
FontWeight.bold)))))
: InkWell( : InkWell(
borderRadius: borderRadius: BorderRadius.circular(20),
BorderRadius.all(Radius.circular(20)),
onTap: () { onTap: () {
if (widget.goto == Goto.home) { if (widget.goto == Goto.home) {
Navigator.push(context, Navigator.push(context,
@ -225,7 +166,9 @@ class _SlideIntroState extends State<SlideIntro> {
child: Center( child: Center(
child: Text(context.s.done, child: Text(context.s.done,
style: TextStyle( style: TextStyle(
color: Colors.black))))), color: Colors.black,
fontWeight:
FontWeight.bold))))),
), ),
), ),
], ],

View File

@ -22,15 +22,14 @@ class _FourthPageState extends State<FourthPage> {
Container( Container(
height: 200, height: 200,
alignment: Alignment.center, alignment: Alignment.center,
padding: EdgeInsets.all(40), padding: EdgeInsets.fromLTRB(40, context.paddingTop + 20, 40, 20),
child: Text( child: Text(
context.s.introFourthPage, context.s.introFourthPage,
style: TextStyle(fontSize: 30, color: Colors.white), style: TextStyle(fontSize: 30, color: Colors.white),
), ),
), ),
Container( SizedBox(
height: context.width * 3 / 4, height: context.width * 3 / 4,
// color: Colors.red,
child: FlareActor( child: FlareActor(
'assets/longtap.flr', 'assets/longtap.flr',
alignment: Alignment.center, alignment: Alignment.center,

View File

@ -17,21 +17,19 @@ class _SecondPageState extends State<SecondPage> {
child: Center( child: Center(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Container( Container(
height: 200, height: 200,
alignment: Alignment.center, alignment: Alignment.center,
padding: padding: EdgeInsets.fromLTRB(40, context.paddingTop + 20, 40, 20),
EdgeInsets.only(top: 20, bottom: 20, left: 40, right: 40),
child: Text( child: Text(
context.s.introSecondPage, context.s.introSecondPage,
style: TextStyle(fontSize: 30, color: Colors.white), style: TextStyle(fontSize: 30, color: Colors.white),
), ),
), ),
Container( SizedBox(
height: context.width * 3 / 4, height: context.width * 3 / 4,
// color: Colors.red,
child: FlareActor( child: FlareActor(
'assets/add.flr', 'assets/add.flr',
isPaused: false, isPaused: false,
@ -39,7 +37,6 @@ class _SecondPageState extends State<SecondPage> {
animation: 'add', animation: 'add',
fit: BoxFit.cover, fit: BoxFit.cover,
)), )),
Spacer(),
], ],
), ),
), ),

View File

@ -22,15 +22,14 @@ class _ThirdPageState extends State<ThirdPage> {
Container( Container(
height: 200, height: 200,
alignment: Alignment.center, alignment: Alignment.center,
padding: EdgeInsets.all(40), padding: EdgeInsets.fromLTRB(40, context.paddingTop + 20, 40, 20),
child: Text( child: Text(
context.s.introThirdPage, context.s.introThirdPage,
style: TextStyle(fontSize: 30, color: Colors.white), style: TextStyle(fontSize: 30, color: Colors.white),
), ),
), ),
Container( SizedBox(
height: context.width * 3 / 4, height: context.width * 3 / 4,
// color: Colors.red,
child: FlareActor( child: FlareActor(
'assets/swipe.flr', 'assets/swipe.flr',
alignment: Alignment.center, alignment: Alignment.center,