import 'dart:math'; import 'package:auto_size_text/auto_size_text.dart'; import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/custom_text_button.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '../../../theme/theme_value.dart'; class SliderView extends StatefulWidget { VoidCallback onLoginClick; SliderView({required this.onLoginClick}); @override State createState() => _SliderViewState(); } class _SliderViewState extends State { late ProjectViewModel projectViewModel; @override Widget build(BuildContext context) { projectViewModel = Provider.of(context); return Container( decoration: cardRadius(20), margin: EdgeInsets.all(0), child: Container( decoration: cardRadius(20, color: Color(0xFFF2B353E)), clipBehavior: Clip.antiAlias, margin: EdgeInsets.zero, // padding: EdgeInsets.zero, child: Container( width: double.infinity, height: double.infinity, clipBehavior: Clip.antiAlias, margin: EdgeInsets.zero, decoration: projectViewModel.isArabic ? containerBottomRightRadiusWithGradientForAr(MediaQuery.of(context).size.width / 4) : containerBottomRightRadiusWithGradient(MediaQuery.of(context).size.width / 4), child: Card( color: Colors.transparent, margin: EdgeInsets.zero, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ mFlex(3), Container( decoration: projectViewModel.isArabic ? containerColorRadiusLeft(appColor, 100) : containerColorRadiusRight(appColor, 100), padding: EdgeInsets.only(left: projectViewModel.isArabic ? 16 : 20, right: projectViewModel.isArabic ? 20 : 16, top: 6, bottom: 6), child: Text( TranslationBase.of(context).medicalFile, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 10, letterSpacing: -0.3, height: 1.2, ), ), ), mFlex(2), Padding( padding: const EdgeInsets.only(left: 20, right: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( TranslationBase.of(context).cantSeeProfile, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 17, letterSpacing: -0.25, height: 25 / 17, ), ), // Text( // TranslationBase.of(context).loginRegisterNow, // style: TextStyle( // color: Colors.white, // fontSize: 12, // letterSpacing: -0.36, // height: 1, // ), // ), ], ), ), mFlex(2), Padding( padding: const EdgeInsets.only(left: 20, right: 20), child: Container( height: MediaQuery.of(context).size.width / 14, width: MediaQuery.of(context).size.width / (projectViewModel.isArabic ? 4 : 6), child: CustomTextButton( shape: cardRadiusNew(8), //shape: OutlinedBorder(), backgroundColor: appColor, elevation: 0, onPressed: () { widget.onLoginClick(); }, child: Center( child: AutoSizeText( TranslationBase.of(context).login, maxLines: 1, style: TextStyle( color: Colors.white, fontSize: 13, letterSpacing: -0.39, height: 1, ), ), ), ), ), ), mFlex(3), ], ), ), ), ), ); } } class CurvedBottomClipper extends CustomClipper { @override Path getClip(Size size) { // I've taken approximate height of curved part of view // Change it if you have exact spec for it final roundingHeight = size.height * 3 / 5; // this is top part of path, rectangle without any rounding final filledRectangle = Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight); // this is rectangle that will be used to draw arc // arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight // also I made it to go 5 units out of screen on left and right, so curve will have some incline there final roundingRectangle = Rect.fromLTRB(-size.width, size.height - roundingHeight * 2, size.width, size.height); final path = Path(); path.addRect(filledRectangle); // so as I wrote before: arc is drawn from center of roundingRectangle // 2nd and 3rd arguments are angles from center to arc start and end points // 4th argument is set to true to move path to rectangle center, so we don't have to move it manually path.arcTo(roundingRectangle, pi, -pi, true); path.close(); return path; } @override bool shouldReclip(CustomClipper oldClipper) { // returning fixed 'true' value here for simplicity, it's not the part of actual question, please read docs if you want to dig into it // basically that means that clipping will be redrawn on any changes return true; } }