import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class AnimatedBackground2 extends StatefulWidget { const AnimatedBackground2({super.key}); @override State createState() => _AnimatedBackground2State(); } class _AnimatedBackground2State extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _topAnimationAlignment; @override void initState(){ super.initState(); SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarIconBrightness: Brightness.light,)); _controller= AnimationController(vsync: this, duration: const Duration(milliseconds: 1500)); _topAnimationAlignment =TweenSequence( [ TweenSequenceItem (tween: Tween(begin: Alignment.topCenter,end: Alignment.center), weight: 1), TweenSequenceItem (tween: Tween(begin: Alignment.center,end: Alignment.topCenter), weight: 2), ] ).animate(_controller); _controller.repeat(); } @override Widget build(BuildContext context) { Size screenSize =MediaQuery.of(context).size; return Scaffold( backgroundColor: Colors.black, body: Stack( alignment: Alignment.bottomCenter, children: [ AnimatedBuilder( animation: _controller, builder: (context,widget){ return Container( height: screenSize.height, width: screenSize.width, decoration: BoxDecoration( gradient: LinearGradient( begin: _topAnimationAlignment.value, end: Alignment.bottomCenter, colors: [ Colors.cyan.shade500.withOpacity(.5), Colors.indigo.shade900.withOpacity(.5), ] ) ), ); }, ), Container( padding: const EdgeInsets.all(8), margin: const EdgeInsets.only(bottom: 80), height: screenSize.height*.4, width: screenSize.width*.9, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20) ), child: const Column( children: [ Padding( padding: EdgeInsets.only(top: 25,bottom: 5), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ CallItem(icon: Icons.add,name: 'Add Call', active: false,), CallItem(icon: Icons.pause,name: 'Hold Call',active: false,), CallItem(icon: Icons.bluetooth,name: 'Bluetooth',active: true,), ], ), ), Padding( padding: EdgeInsets.only(top: 25,bottom: 5), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ CallItem(icon: Icons.volume_up,name: 'Speaker',active: true,), CallItem(icon: Icons.mic_off,name: 'Mute',active: false,), CallItem(icon: Icons.keyboard,name: 'Keypad',active: true,), ], ), ), Padding( padding: EdgeInsets.only(top: 20.0), child: CircleAvatar( radius: 40, backgroundColor: Colors.red, child: Icon(Icons.call_end,size: 45,), ), ) ], ), ), ], ) ); } } class CallItem extends StatelessWidget { final IconData icon; final String name; final bool active; const CallItem({ super.key, required this.icon,required this.name, required this.active }); @override Widget build(BuildContext context) { return Column( children: [ Icon(icon,color: active?Colors.white:Colors.grey,size: 45,), Text(name,style: TextStyle(color: active?Colors.white:Colors.grey,fontSize: 20),) ], ); } }