Question 80136 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter container with curve border

I want this type container with curve border, please check attach imagesflutter continer

best solution of answer

Tags:

3

Answers


  1. 0

    I am pretty sure you will find something that will work here:

    Flutter draw container with a curve in the center

    Hope it helps.

    Login or Signup to reply.
  2. 0

    Here is your Clip Code… and also use Shape Maker to design such layout and you will get clip code

    Your Clip Container with border

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        painter: BorderPainter(),
        child: Container(
          height: 200,
          width: 400,
          child: Center(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child:  Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Pakistan'),
                  Spacer(),
                  Text('VS'),
                  Spacer(),
                  Text('India'),
                ],
              ),
            )
          )
        ),
      ),
    );
  }
}

    Clipping Code of Container

    class BorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = Colors.pink;
    Path path0 = Path();
    path0.moveTo(size.width*0.4995083,size.height*0.2401000);
    path0.quadraticBezierTo(size.width*0.5840167,size.height*0.2406000,size.width*0.6666667,size.height*0.1420143);
    path0.lineTo(size.width*0.9996583,size.height*0.1441000);
    path0.lineTo(size.width,size.height);
    path0.lineTo(0,size.height);
    path0.lineTo(0,size.height*0.1422571);
    path0.lineTo(size.width*0.3358333,size.height*0.1442857);
    path0.quadraticBezierTo(size.width*0.4136083,size.height*0.2398857,size.width*0.4995083,size.height*0.2401000);
    path0.close();
    canvas.drawPath(path0, paint);
  }

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

    enter image description here

    Login or Signup to reply.
  3. 0

    I am Using ShapeBorder with paint.

    class CustomShape extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return getInnerPath(rect);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final double curveX = rect.width / 10;
    Path rectPath = Path()
      ..addRRect(RRect.fromRectAndRadius(rect, const Radius.circular(24)));

    Path curvePath = Path()
      ..moveTo(rect.center.dx - curveX, rect.top)
      ..quadraticBezierTo(
        rect.center.dx,
        rect.center.dy - curveX, //middle curve control
        rect.center.dx + curveX,
        rect.top,
      );

    return Path.combine(PathOperation.xor, rectPath, curvePath);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    canvas.drawPath(
        getOuterPath(rect),
        Paint()
          ..color = Colors.red
          ..style = PaintingStyle.stroke);
  }

  @override
  ShapeBorder scale(double t) => this;
}

    And use

    child: Container(
  height: 200,
  width: 500,
  decoration: ShapeDecoration(
    shape: CustomShape(),
  ),
),

    Use quadraticBezierTo value to control the curve

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search