I have a problem adding a Text to a Container - flutter

Question

I'm new to flutter and new to programming in general. My problem is I can't add this
child: Align(
alignment: Alignment(0, 48),
child: Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight._(4),
fontSize: 18.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
to this code
class _SetupState extends State<Setup> {
#override
Widget build(BuildContext context) {
return Column(children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
),
)),
]);
}
}
I tried adding it to the container, making a new align but I still didn't manage to succeed.
Thanks for the help!!

Answer 1

I made a layout based on the image provided in the comments:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Column(
children: <Widget>[
Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'WORKS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'RESTS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: FlatButton(
color: Colors.greenAccent,
child: Text(
'START',
style: TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.w400
),
),
onPressed: () {
},
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
),
),
],
)
],
),
),
),
),
);
}
I used a Column(let's name it column1) for the whole grey box, and every one of (SETS, +, -), (WORK, +, -), and (RESTS, +, -) is a Column inside the column1. Every (+, -) is a Row wrapped with a Padding. The Padding is used to make the (+, -) become closer to the center of the box.
There are many ways to make such layout, this is only one.
Result:

Answer 2

if that does not work you can first align it the way you want. Then use padding or margin so that you can have it exactly where you want it be.
Container(
padding:
alignment:
child:Text()
)