Rows Inside Columns

Part of the Your First App section of Coddy's Flutter journey. Lesson 24 of 32.

A Row can be one of the children of a Column. That is how a screen gets lines with several things on them:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min makes a row or column only as big as its children, instead of taking all the space it is given. Here it keeps both inside the middle of the screen.

Challenge

Easy

Turn this into a little profile header:

keep Ada Lovelace on the first line
put London and 1815 side by side under it, in a Row

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}