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.

CodePudding user response：

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"))
                  ],
                ),
              )
            ],
          );
        },
      )),
    );
  }
}