Flutter - How 2 Give different width to different container enclosed in a single column? - flutter

Question

I'm trying to develop a clone of an App idea from dribble, which can be found here.
Can you please tell me is the code I'm trying to write is correct or not??
As I've tried to wrap a Column with two text Widgets Enclosed in Container ( separate ) and when I'm trying to change the width of one container It changes the margin of the other also.
My Code is :-
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 30, left: 20),
child: const Text(
'Find Intrested Events to Join',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0,
wordSpacing: 2,
),
),
width: 200,
),
// -----------------------------------------------------------------
Container(
margin: EdgeInsets.only(left: 20, top: 20),
width: 220,
child: Text(
'We share all events like Charity, workshop, Blood drive, etc.',
style: TextStyle(wordSpacing: 2, height: 1.4),
),
)
],
),
),
);
Can you tell me How to achieve that stage that I can change the Containers' width without affecting the margin of others.

Answer 1

It will be better to use Stack for this case while it contains background image, Also learn more about Stack, Align, Positioned and LayoutBuilder from flutter.dev
Play with this widget ,
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Container(
color: Colors.amber.withOpacity(.4),
), //background image
Positioned(
left: 20,
top: 30,
child: SizedBox(
width: constraints.maxWidth * .5, // 50% of width
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Find Intrested Events to Join',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0,
wordSpacing: 2,
),
),
SizedBox(
height: 20,
), //spaces between text
Text(
'We share all events like Charity, workshop, Blood drive, etc.',
style: TextStyle(wordSpacing: 2, height: 1.4),
),
],
),
),
),
Align(
// also Postisioned can be use
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("hereh"),
ElevatedButton(onPressed: () {}, child: Text("Button"))
],
),
)
],
);
},
)),
);
}
}