mirror of
https://github.com/stonega/tsacdop
synced 2025-02-17 20:10:37 +01:00
Minor UI change.
This commit is contained in:
parent
0fdf9aac9d
commit
850250efec
@ -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.start,
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Container(
|
_indicatorWidget(0),
|
||||||
alignment: Alignment.center,
|
_indicatorWidget(1),
|
||||||
child: _position < 0.2
|
_indicatorWidget(2),
|
||||||
? Text(
|
_indicatorWidget(3)
|
||||||
'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))))),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
@ -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,
|
||||||
|
@ -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(),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user