Positioning widget not effective | How to position containers

Question

I am still new to flutter, and I want to position the box in the screenshot below, not in the centre of the screen, but at a certain distance away from the left side with text inside the box.

I have tried the positioning widget but still no luck.

Any advice on what widget I would use, and how to do so properly?

@override
  Widget build(BuildContext context) {
    return DecoratedBox(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("assets/startbackground.jpg"),
              fit: BoxFit.cover),
        ),
        child: Center(
          child: Container(
            height: 500.0,
            width: 120.0,
            color: Colors.blue[50],
            child: Align(
              alignment: Alignment.topRight,
              child: FlutterLogo(
                size: 60,
              ),
            ),
          ),
        ));
  }
}

Answer 1

Try out that code. I mainly used containers, paddings, alignment property as well as the axis alignment for the column. With that I achieved what you can see on the screenshot below. In order to use an image behind all that, I would just simply recommend to use a stack and then this whole code with some adaptations. The colors are just illustrative. You could set all of them transparent.

Here is the screenshot:

And here is the code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text("EXAMPLE"),
      ),
      body: Container(
        color: Colors.orangeAccent,
        height: double.infinity,
        width: double.infinity,
        alignment: Alignment.bottomLeft,
        child: UnconstrainedBox(
          child: Padding(
            padding: const EdgeInsets.only(left: 50, bottom: 50),
            child: Container(
              height: 400,
              width: 200,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      child: Text("Text", style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700),textAlign: TextAlign.left,),
                      color: Colors.purpleAccent,
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Container(
                      child: Text("Some Text", style: TextStyle(fontSize: 60, fontWeight: FontWeight.w700),),
                      color: Colors.purpleAccent,
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Container(
                      child: Text("Some Text", style: TextStyle(fontSize: 60, fontWeight: FontWeight.w700),),
                      color: Colors.teal,
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Padding(
                      padding: EdgeInsets.all(15),
                      child: FlatButton(
                        minWidth: 200,
                        onPressed: (){},
                        child: Text(
                          "HI",
                          style: TextStyle(
                              color: Color(0xff7638c9),
                              fontSize: 11),
                        ),
                        color: Colors.transparent,
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.purple),
                          borderRadius: BorderRadius.circular(18.0),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}