CODEWITHSUNDEEP
androidflutterdart
Wells Nations
Wells Nations

Reputation: 37

How to Create a Curved bottom Container in flutter

I'm really new to Flutter, I'm trying to replicate the design in this image See sample image right here my problem is how to make the bottom of the image curved as it appears in the photo... Your help will be much appreciated.

Upvotes: 1

Views: 3242

Answers (3)

Jim
Jim

Reputation: 7601

Simply use this package, flutter_custom_clippers, with many custom shape, use of ease

Upvotes: 0

Shubham Narkhede
Shubham Narkhede

Reputation: 2130

enter image description here

You can try with CustomClipper class

  ClipPath(
   clipper: CurveImage(),
   child: Container(
     width: MediaQuery.of(context).size.width,
     height: 300,
     decoration: BoxDecoration(
         image: DecorationImage(
             fit: BoxFit.fill,
             image: NetworkImage(
                 "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjHtidokLaIsJlVNVtCk_DJXAIvPJyvTFnYA&usqp=CAU"))
     ),
   ),
 ),

In the above code I called one custom clipper object name CurveImage() it will help you to convert your image into a curve shape.

CLass

 class CurveImage extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height-30);
    path.quadraticBezierTo(size.width / 4, size.height,
        size.width / 2, size.height);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height,
        size.width, size.height - 30);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Upvotes: 1

saeedata
saeedata

Reputation: 947

you can use this code

Container(
    height: 200.0,
    decoration: new BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.vertical(
          bottom: Radius.elliptical(
              MediaQuery.of(context).size.width, 100.0)),
    ),
  ),

or you can use CustomPainter

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

// class to draw the profile screen
class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: const Color(0xffea5d49),
          leading: Icon(
            Icons.menu,
            color: Colors.white,
          ),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
              ),
              painter: HeaderCurvedContainer(),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text(
                    'Profile',
                    style: TextStyle(
                      fontSize: 35.0,
                      letterSpacing: 1.5,
                      color: Colors.white,
                      fontWeight: FontWeight.w600,

                    ),
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width / 2,
                  height: MediaQuery.of(context).size.width / 2,
                  padding: const EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    // image: DecorationImage(
                    //   image: AssetImage(null),
                    //   fit: BoxFit.cover,
                    // ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// CustomPainter class to for the header curved-container
class HeaderCurvedContainer extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = const Color(0xffea5d49);
    Path path = Path()
      ..relativeLineTo(0, 150)
      ..quadraticBezierTo(size.width / 2, 250.0, size.width, 150)
      ..relativeLineTo(0, -150)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Upvotes: 2

Related Questions