how to give curve design inside container in flutter? - 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

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:

Answer 5

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'),),
)