How to add text below "POMODONE" in Flutter?

Question

I'm trying to modify my Flutter layout to display another piece of text below the "POMODONE" text. Here's the visual representation of what I want to achieve:

Currently, my layout looks like this:

Here's my relevant code:

  class HomePage extends StatelessWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xffF24004),
          body: Center(
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      print("Container clicked");
                      Navigator.pushReplacement(
                          context, MaterialPageRoute(builder: (_) => LogIn()));
                    },
                    child: Container(
                      width: 202,
                      height: 196,
                      margin: EdgeInsets.all(100.0),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffF2B749),
                      ),
                      child: const Center(
                        child: Text("P O M O D O N E", style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 22,
                        color: Color(0xff313640),
                      ),),
    
                      ),
                    ),
                  ),
                  Center(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 75,
                          height: 112,
                          child: Icon(Icons.check_rounded,
                              size: 100,
                              color: Color(0xffF3F5F4),
                          ),
                        ),
                      ],
                    ),
                  ) 
                ],
              ),
            ),
          ),
        );
      }
    }

I've tried duplicating the POMODONE text container, but it's not working as expected. Can you help me adjust my layout?

Answer 1

It's quite simple. Since you want one widget below another one, you can use a Column() with setting the mainAxisAlignment to MainAxisAlignment.center:

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "P O M O D O N E",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
            color: Color(0xff313640),
          ),
        ),
        Text('click me')
      ],
    )

You'll have to remove the Center() widget in place of the Column().

Using your code, a complete runnable example:

import 'package:braintrinig/pages/log_in.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF24004),
      body: Center(
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  print("Container clicked");
                  Navigator.pushReplacement(
                      context, MaterialPageRoute(builder: (_) => LogIn()));
                },
                child: Container(
                  width: 202,
                  height: 196,
                  margin: EdgeInsets.all(100.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffF2B749),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("P O M O D O N E", style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 22,
                        color: Color(0xff313640),
                      ),),
                      Text('Click me')
                    ],
                  ),
                ),
              ),
              Center(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 75,
                      height: 112,
                      child: Icon(Icons.check_rounded,
                        size: 100,
                        color: Color(0xffF3F5F4),
                      ),
                    ),
                  ],
                ),
              ) // Add Another Icon Here
            ],
          ),
        ),
      ),
    );
  }
}

---

I suggest you take your time to read the official documentation on Layouts in Flutter.