열 안에 행 넣기

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 24번째.

Row는 Column의 자식 중 하나가 될 수 있습니다. 이렇게 하면 화면에 여러 항목이 있는 줄을 만들 수 있습니다.

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

mainAxisSize: MainAxisSize.min은 행이나 열이 주어진 공간을 모두 차지하는 대신 자식 요소의 크기만큼만 차지하게 합니다. 여기서는 두 요소가 화면 중앙에 함께 있도록 합니다.

챌린지

쉬움

이것을 간단한 프로필 헤더로 만들어 보세요:

첫 번째 줄에 Ada Lovelace를 유지하세요
그 아래에 London과 1815를 Row 안에 나란히 배치하세요

직접 해보기

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'),
            ],
          ),
        ),
      ),
    );
  }
}