I am new to flutter and having come from an android dev background, having trouble placing my widgets appropriately.

I intent to place a bunch of texts/buttons one on top of another. Below is how i want to set it in my final screen. Additionally, I want to set the entire page's background color as say Red.

Given i dont need the title bar etc, I thought I'd start by not using the Scaffold at all. So here's my code as of now. I am first trying just to the 'MYAPP' text placed correctly, and not getting it to work.

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

And in a separate file, I define MyPage

class MyPage extends StatelessWidget {
  const MyPage ({Key? key}) : super(key: key);

  static const TextStyle myStyle = TextStyle(
  color: AppColors.complementColor,
  fontSize: 80,
  );

  @override
  Widget build(BuildContext context) {
    return Container( // -> using Container, so I can set the background color as Red.
      color: Colors.Red,
      child: Column(
        children: [
          Container( // -> using container again so I can add axis etc, and margins
              child: const Text(
                'MYAPP',
                style: myStyle,
                textDirection: TextDirection.ltr,
              ))
        ],
      ),
    );
  }
}

What happens with this is that I get my MYAPP, in the top middle of screen. What i want is for it to be in the left side (and with margin from start).

I thought of adding, mainAxisAlignment: MainAxisAlignment.center and crossAxisAlignment: CrossAxisAlignment.start, but when I add crossAxisAlignment, the text box isnt getting shown at all, and even the main background color which was originally red, changes to black.

So I've got a few questions.

1. How do I get my text 'MYAPP' to be placed properly using the widgets I have, and why does adding crossAxisAlignment as start removes the entire widget.
2. If I need to add margin/padding etc, does it make sense to do the way I am doing (i.e. have a container around column)
3. When I set the color of root container to Red, even then the topmost bar of my android phone (the one that is used to scroll down any notifications) is not really of red color, but an offset of red. Why is that?
4. Is it better if I used scaffold without appbar for this?
5. If i dont give any axis alignment for my column, why is the text placed in the top center and why not top left? Additionally, why does the text have some padding already from the surrounding container?

CodePudding user response：

Please use this code

void main() {
  runApp(const MaterialApp(
  debugShowCheckedModeBanner: false,
    home: MyPage(),
  ));
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  static const TextStyle myStyle = TextStyle(
    color: Colors.black,
    fontSize: 80,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Padding(
              padding: EdgeInsets.only(left: 20.0),
              child: Text(
                'MYAPP',
                style: myStyle,
                textDirection: TextDirection.ltr,
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 25),
              child: Text(
                'This is my app',
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 25.0, right: 25),
              child: Row(
                children: [
                  Expanded(
                    child: SizedBox(
                      height: 50,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            primary: Colors.transparent,
                            elevation: 0,
                            // side: const BorderSide(width: 2.0, color: Colors.black,),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(18.0),
                                side: const BorderSide(
                                    color: Colors.black, width: 3))),
                        child: const Text(
                          'This is my button',
                          style: TextStyle(color: Colors.black),
                        ),
                        onPressed: () {},
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output :