how to give curve design inside container in flutter?

Question

I trying to understand how can I design curves in a container like the below can anyone help me to design this kind of container? much appreciate it if anyone provides code for this kind of design. Thank you in advance.

Answer 1

use Stack and boxDecoration , play with margins and size to get best result.

SizedBox(
          width: double.infinity,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: Colors.grey,
                  boxShadow: const [
                    BoxShadow(color: Colors.grey, spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
              Container(
                width: 200,
                child: const Center(
                  child: Text('\$1400'),
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: const Color(0xff232fac),
                  boxShadow: const [
                    BoxShadow(color: Color(0xff232fac), spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
              Container(
                width: 200,
                margin: const EdgeInsets.only(left: 150),
                child: const Center(
                  child: Text('\$1400'),
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: const Color(0xff483395),
                  boxShadow: const [
                    BoxShadow(color: Colors.white, spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
            ],
          ),
        ),

• read about Stack
• read about boxDecoration

Answer 2

You cab usethe decoration property of the container to add border radius to a container

Container(
  height: 25,
  width: 100,
 decoration: BoxDecoration (
    borderRadius : BorderRadius circular(15),
   color: Colors.purple
  )
)

Answer 3

Use Stack and gradient to implement this

Stack(
  clipBehavior: Clip.none,
  alignment: Alignment.center,
  children: [
    Container(
      height: 50,
      width: double.infinity,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        gradient: LinearGradient(colors: [
            Colors.purple,
            Colors.grey,
          ],
          stops: [0.5, 0],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text("\$1400"),
            Text("\$700"),
          ],
        ),
      ),
    ),
    Container(
      height: 50,
      width: 150,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        color: Colors.green,
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Text("\$700"),
      ),
    ),
  ],
 

Stack(
  clipBehavior: Clip.none,
  alignment: Alignment.center,
  children: [
    Container(
      height: 50,
      width: double.infinity,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        gradient: LinearGradient(colors: [
            Colors.purple,
            Colors.grey,
          ],
          stops: [0.5, 0],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text("\$1400"),
            Text("\$700"),
          ],
        ),
      ),
    ),
    Container(
      height: 50,
      width: 150,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        color: Colors.green,
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Text("\$700"),
      ),
    ),
  ],

Answer 4

use decoration property see simple use.

Container(
        height: 50,
        width: 500,
        decoration: BoxDecoration (
                borderRadius : BorderRadius circular(40),
                color: Colors.red)
       child: const Center(
        child: Text('\$ 1400'),),
)

Answer 5

You can try something like this:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  final double center = 300;

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Positioned(
            left: 0,
            child: Container(
              width: center,
              decoration: BoxDecoration(
                  gradient: const LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.indigo, Colors.blue]),
                  borderRadius: BorderRadius.all(Radius.circular(
                      MediaQuery.of(context).size.height / 2.0)),
                  border: Border.all(color: Colors.white, width: 3)),
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    '\$ 1400',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            )),
        Positioned(
            right: 0,
            child: Container(
              width: MediaQuery.of(context).size.width - center,
              decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.all(Radius.circular(
                      MediaQuery.of(context).size.height / 2.0)),
                  border: Border.all(color: Colors.white, width: 3)),
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    '\$ 900',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            )),
        Positioned(
            left: center,
            child: FractionalTranslation(
              translation: const Offset(-0.5, 0),
              child: Container(
                decoration: BoxDecoration(
                    gradient: const LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Colors.indigo, Colors.purple]),
                    borderRadius: BorderRadius.all(Radius.circular(
                        MediaQuery.of(context).size.height / 2.0)),
                    border: Border.all(color: Colors.white, width: 3)),
                child: const Center(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
                    child: Text(
                      '\$ 700',
                      style: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ),
            )),
      ]),
    );
  }
}

output: