flutter layout trouble for add image above two button

Question

I am posting on StackOver Flow because I am stuck in the development of my Flutter application. I'm a beginner and I'm learning Flutter and Dart but I'm stuck on something basic, which is a bit frustrating.

I would like to display an image in the middle of the mobile application with two buttons underneath. Depending on which button I click, the image will change. I'm trying to do this to practice but I'm stuck on the layout. I can display the two buttons but I can't position the image above

import 'package:flutter/material.dart';

const appBarColor_primary = Color(0xFFEE0245);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: ColorScheme.light()),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Am I rich ?'),
          backgroundColor: appBarColor_primary,
        ),
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
                'https://dictionary.cambridge.org/fr/images/thumb/diamon_noun_002_10599.jpg?version=5.0.158'),
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(appBarColor_primary),
              ),
              onPressed: () {},
              child: Text('Yes I am Rich !'),
            ),
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(appBarColor_primary),
              ),
              onPressed: () {},
              child: Text(
                'No, I am poor !',
              ),
            ),
          ],
        )));
  }
}

Do you know how I could do ?

Thank you in advance for your precious help

Esteve Aguilera Esteve Aguilera · Accepted Answer · 2021-04-10T15:28:12

You need a Column to place widgets vertically:

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Am I rich ?'),
          backgroundColor: appBarColor_primary,
        ),
        body: Center(
            child: Column(
          children: [
            Image.network('https://dictionary.cambridge.org/fr/images/thumb/diamon_noun_002_10599.jpg?version=5.0.158'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(appBarColor_primary),
                  ),
                  onPressed: () {},
                  child: Text('Yes I am Rich !'),
                ),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(appBarColor_primary),
                  ),
                  onPressed: () {},
                  child: Text(
                    'No, I am poor !',
                  ),
                ),
              ],
            ),
          ],
        )));
  }
}

flutter layout trouble for add image above two button

1 Answers