Skip to content

Instantly share code, notes, and snippets.

@MedRedha
Last active July 23, 2022 01:53
Show Gist options
  • Save MedRedha/2bdb16d1dd788c8fc9b46b1af7f0f396 to your computer and use it in GitHub Desktop.
Save MedRedha/2bdb16d1dd788c8fc9b46b1af7f0f396 to your computer and use it in GitHub Desktop.
Flutter Animated Splash
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(SplashScreen());
class SplashScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => AnimatedSplash();
}
class AnimatedSplash extends State<SplashScreen>
with SingleTickerProviderStateMixin {
bool _visible = true;
double _scale;
AnimationController _controller;
FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(
milliseconds: 200,
),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
super.initState();
}
AnimatedSplash() {
Timer(const Duration(seconds: 2), () {
setState(() {
_logoStyle = FlutterLogoStyle.horizontal;
});
});
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
_scale = 1 - _controller.value;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Animated Splash by ',
style: TextStyle(color: Colors.white, fontSize: 20),
children: <TextSpan>[
TextSpan(
text: 'Med Redha',
style: new TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[Colors.red, Colors.blue])),
),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: new EdgeInsets.only(bottom: 15.0),
child: AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Container(
child: new FlutterLogo(
size: 300.0,
style: _logoStyle,
),
),
),
),
SizedBox(
height: 10.0,
),
Container(
child: GestureDetector(
onTapDown: _onTapDown,
onTapUp: _onTapUp,
child: Transform.scale(
scale: _scale,
child: _animatedButtonUI,
),
),
),
],
),
),
),
);
}
Widget get _animatedButtonUI => Container(
margin: new EdgeInsets.only(top: 15.0),
height: 50,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Color(0x80000000),
blurRadius: 30.0,
offset: Offset(0.0, 5.0),
),
],
),
child: Center(
child: Text(
'Hide/Show',
style: TextStyle(fontSize: 15.0, color: Colors.white),
),
),
);
void _onTapDown(TapDownDetails details) {
_controller.forward();
setState(() {
_visible = !_visible;
});
}
void _onTapUp(TapUpDetails details) {
_controller.reverse();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment