import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:my_flutter_puzzle/utils/extensions/context_extension.dart'; import 'package:my_flutter_puzzle/utils/extensions/string_extensions.dart'; class LoseScreen extends StatefulWidget { final int move; final int tiles; const LoseScreen({ Key? key, required this.tiles, required this.move, }) : super(key: key); @override State createState() => _LoseScreenState(); } class _LoseScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: const Color(0xffA7A7A7), body: SizedBox( width: context.width, height: context.height, child: Stack( alignment: AlignmentDirectional.centerEnd, children: [ Center( child: Stack( alignment: Alignment.bottomCenter, children: [ Container( width: context.width * 267 / 812, height: context.height * 284 / 375, decoration: BoxDecoration( gradient: const LinearGradient( colors: [ Color(0xffB9B9B9), Color(0xffD1D1D1), ], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), borderRadius: BorderRadius.circular(36), ), child: Column( children: [ const SizedBox(height: 31), const Text( 'Opsssss !', style: TextStyle( color: Colors.white, fontSize: 25, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 24), Container( width: context.width * 114 / 812, height: context.width * 114 / 812, decoration: BoxDecoration( color: const Color(0xffC0C0C0), shape: BoxShape.circle, border: Border.all( color: const Color(0xff7a7a7a), width: 1, ), ), child: Container( margin: EdgeInsets.all(context.width * 20 / 812), padding: EdgeInsets.all(context.width * 20 / 812), decoration: const BoxDecoration( color: Color(0xffE02020), shape: BoxShape.circle, ), child: SvgPicture.asset( 'sad'.svgPath, colorFilter: const ColorFilter.mode( Colors.white, BlendMode.srcIn, ), ), ), ), const SizedBox(height: 19), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( children: [ const Text( 'Tiles', style: TextStyle( color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold, ), ), const SizedBox(width: 9), Text( '${widget.tiles}', style: const TextStyle( decoration: TextDecoration.underline, color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold, ), ), ], ), const SizedBox(width: 42), Row( children: [ const Text( 'Move', style: TextStyle( color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold, ), ), const SizedBox(width: 9), Text( '${widget.move}', style: const TextStyle( decoration: TextDecoration.underline, color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold, ), ), ], ), ], ), ], ), ), Transform.translate( offset: const Offset(0, 20), child: GestureDetector( onTap: () { Navigator.pop(context, true); }, child: Container( width: context.width * 147 / 812, height: context.height * 51 / 375, padding: const EdgeInsets.all(3), decoration: BoxDecoration( color: const Color(0xff979797).withOpacity(0.12), borderRadius: BorderRadius.circular(36), ), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(31), gradient: const LinearGradient( colors: [ Color(0xffFFC600), Color(0xffFF5A00), ], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ const SizedBox(width: 6), Container( width: context.width * 26 / 540, height: context.width * 26 / 540, padding: const EdgeInsets.all(9), margin: const EdgeInsets.symmetric(vertical: 3), decoration: BoxDecoration( border: Border.all( color: Colors.white, width: 1, ), gradient: const LinearGradient( colors: [ Colors.white, Color(0xffD5D5D5), ], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), shape: BoxShape.circle, ), child: SvgPicture.asset('refresh'.svgPath), ), const SizedBox(width: 8), const Text( 'Restart', style: TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold, ), ), const SizedBox(width: 14), ], ), ), ), ), ), ], ), ), Container( margin: EdgeInsetsDirectional.only(end: context.width * 68 / 812), width: context.width * 142 / 812, height: context.height * 280 / 375, child: Image( image: AssetImage('avatar'.pngPath), ), ), ], ), ), ); } }