diplomatic-quarter/lib/pages/landing/widgets/slider_view.dart

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:flutter/material.dart';
import 'package:provider/provider.dart';

class SliderView extends StatelessWidget {
  Function onLoginClick;

  SliderView({this.onLoginClick});

  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(Color(0xFFFBF2E31), 100) : containerColorRadiusRight(Color(0xFFFBF2E31), 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: RaisedButton(
                      shape: cardRadiusNew(8),
                      color: Color(0xFFFBF2E31),
                      elevation: 0,
                      padding: EdgeInsets.zero,
                      onPressed: () {
                        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<Path> {
  @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<Path> 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;
  }
}