Container with rounded side

Question

I am trying to do a Container in flutter with a custom shape, but I don't know how to do it.

I need a rectangle with rounded corner and rounder side as the image above shows.

Thank you!

Answer 1

You may achieve this with a CustomPaint:

Full source code

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: MyPainter(),
          child: Container(
            alignment: Alignment.center,
            width: 250.0,
            height: 300.0,
            child: Text(
              'Hello!',
              style: TextStyle(
                fontSize: 64,
                fontWeight: FontWeight.bold,
                color: Colors.white54,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final Gradient gradient;
  final double sizeFactor;

  static const Gradient defaultGradient = const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Color(0xff0e0e0e), Color(0xff02153d)],
  );

  MyPainter({
    this.gradient = defaultGradient,
    this.sizeFactor = 15,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final gradientPaint = Paint()
      ..shader = gradient.createShader(
        Rect.fromLTRB(0, 0, size.width, size.height),
      );

    Path path = Path()
      ..moveTo(3 * sizeFactor, sizeFactor)
      ..quadraticBezierTo(
        size.width / 2,
        .75 * sizeFactor,
        size.width - 3 * sizeFactor,
        sizeFactor,
      )
      ..quadraticBezierTo(
        size.width - 2 * sizeFactor,
        sizeFactor,
        size.width - 2 * sizeFactor,
        2 * sizeFactor,
      )
      ..quadraticBezierTo(
        size.width - 1.75 * sizeFactor,
        size.height / 2,
        size.width - 2 * sizeFactor,
        size.height - 2 * sizeFactor,
      )
      ..quadraticBezierTo(
        size.width - 2 * sizeFactor,
        size.height - sizeFactor,
        size.width - 3 * sizeFactor,
        size.height - sizeFactor,
      )
      ..quadraticBezierTo(
        size.width / 2,
        size.height - .75 * sizeFactor,
        3 * sizeFactor,
        size.height - sizeFactor,
      )
      ..quadraticBezierTo(
        2 * sizeFactor,
        size.height - sizeFactor,
        2 * sizeFactor,
        size.height - 3 * sizeFactor,
      )
      ..quadraticBezierTo(
        1.75 * sizeFactor,
        size.height / 2,
        2 * sizeFactor,
        2 * sizeFactor,
      )
      ..quadraticBezierTo(
        2 * sizeFactor,
        sizeFactor,
        3 * sizeFactor,
        sizeFactor,
      )
      ..close();

    canvas.drawPath(path, gradientPaint);
  }

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

Answer 2

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black,width: 1),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Image.asset("assets/abc.png"),
      ),
    )

this was you can achieve container with rounded border and image with rounded border with some border around image.