Flutter Layout : How to align independently several widgets centered horizontally

[divi...@gmail.com]

Hi.
I'm learning Flutter and I test and looking for the web to understand the hierarchy of flutter development !

I would like to do that

There is my code with no issues:

import 'package:flutter/material.dart';

class Intro extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.png'),
fit: BoxFit.cover
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'NAME',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 76,
color: const Color(0xffffffff),
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
Text(
'Description',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 16,
color: const Color(0xffffffff),
letterSpacing: 0.40,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w300,
),
),

Align(
alignment: Alignment.bottomCenter,
child: Text(
'Other description',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 14,
color: const Color(0xffffffff),
fontWeight: FontWeight.w300,
),
textAlign: TextAlign.center,
),
),
],
),
],
),
),
]
),
);
}
}
I have tested other solutions without results, but I can't understand the flutter hierarchy and I don't understand why my code is not working.
I want "other description" text on the bottom of screen.

Thanks for explanation and your help.

[Andy Greenshaw]

No need for the Stack or Row. User Spacer (or Expanded) to separate (space out) items in a Column (or Row).
Need to set width of the Container to full screen width (this means you don’t need the Row).

class Intro extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        width: width,
        decoration:
            BoxDecoration(image: DecorationImage(image: AssetImage('images/background.png'), fit: BoxFit.cover)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
            Spacer(),

            Text(
              'NAME',
              style: TextStyle(
                fontFamily: 'Raleway',
                fontSize: 76,
                color: const Color(0xffffffff),
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(
              'Description',
              style: TextStyle(
                fontFamily: 'Raleway',
                fontSize: 16,
                color: const Color(0xffffffff),
                letterSpacing: 0.40,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w300,
              ),
            ),

            Spacer(),
            Text(
              'Other\nDescription',

              style: TextStyle(
                fontFamily: 'Raleway',
                fontSize: 14,
                color: const Color(0xffffffff),
                fontWeight: FontWeight.w300,
              ),
              textAlign: TextAlign.center,
            ),

            const SizedBox(height: 8.0),
          ],
        ),
      ),
    );
  }
}

On Nov 2, 2020, 4:23 PM +0000, divi...@gmail.com <divi...@gmail.com>, wrote:

images/background.png

[divi...@gmail.com]

there are so many ways to code that i can't seem to follow. It works, thanks. I will continue to read the documentation.