import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:provider/provider.dart'; import '../state/settingstate.dart'; import '../home/home.dart'; import '../util/pageroute.dart'; import 'fourthpage.dart'; import 'secondpage.dart'; import 'thirdpage.dart'; import 'firstpage.dart'; enum Goto { home, settings } class SlideIntro extends StatefulWidget { final Goto goto; SlideIntro({this.goto, Key key}) : super(key: key); @override _SlideIntroState createState() => _SlideIntroState(); } class _SlideIntroState extends State { 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 void initState() { super.initState(); _position = 0; _controller = PageController() ..addListener(() { setState(() { _position = _controller.page; }); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AnnotatedRegion( value: SystemUiOverlayStyle( statusBarBrightness: Brightness.light, systemNavigationBarIconBrightness: Brightness.dark), child: Scaffold( backgroundColor: Colors.grey[100], body: Container( child: Stack( children: [ PageView( physics: const PageScrollPhysics(), controller: _controller, scrollDirection: Axis.horizontal, children: [ FirstPage(), SecondPage(), ThirdPage(), FourthPage(), ], ), Positioned( bottom: 0, left: 0, child: Container( color: Colors.grey[100].withOpacity(0.5), width: MediaQuery.of(context).size.width, // alignment: Alignment.center, 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), ), ], ), ), ), Container( alignment: Alignment.center, height: 40, width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: Colors.white), borderRadius: BorderRadius.all(Radius.circular(20)), color: Colors.white, boxShadow: _customShadow, ), child: Material( color: Colors.transparent, child: _position < 2.5 ? InkWell( borderRadius: BorderRadius.all(Radius.circular(20)), onTap: () => _controller.animateToPage( _position.toInt() + 1, duration: Duration(milliseconds: 200), curve: Curves.bounceIn), child: SizedBox( height: 40, width: 80, child: Center( child: Text('Next', style: TextStyle( color: Colors.black))))) : InkWell( borderRadius: BorderRadius.all(Radius.circular(20)), onTap: () { if (widget.goto == Goto.home) { Navigator.push(context, SlideLeftRoute(page: Home())); Provider.of(context, listen: false) .saveShowIntro(); } else if (widget.goto == Goto.settings) { Navigator.pop(context); } }, child: SizedBox( height: 40, width: 80, child: Center( child: Text('Done', style: TextStyle( color: Colors.black))))), ), ), ], ), ), ), ], ), ), ), ); } }