Positioning widget not effective | How to position containers - flutter

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