lib\main.dart

import 'package:flutter/material.dart';

main() {
  runApp(myApp());
}
// 한줄로 표현 가능 : 다트 언어 문법
// void main() => runApp(MyApp()); 


class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /* ----------------------------- */
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32), // padding 값
      child: Row(children: [
        Expanded(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.only(bottom: 8),
              child: const Text(
                '플러터 웨이브가 시작되었다!',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            Text(
              '거스를 수 없는 NEW WAVE',
              style: TextStyle(
                color: Colors.grey[500], // color[num] 사용시 const를 사용하면 안됨
              ),
            ),
          ],
        )),
        Icon(
          Icons.star,
          color: Colors.red[500],
        ),
        const Text('41'),
      ]),
    );

    /* ----------------------------- */
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildButtonColumn(color, Icons.call, '전화'),
          _buildButtonColumn(color, Icons.near_me, '친구'),
          _buildButtonColumn(color, Icons.share, '공유')
        ],
      ),
    );

    /* ----------------------------- */
    Widget textSection = Container(
      padding: const EdgeInsets.all(32),
      child: Column(
        children: const [
          Text(
            'Flutter의 레이아웃 메커니즘이 동작하는 방식.\n'
            '위젯을 수평과 수직으로 배치하는 방법.\n'
            'Flutter 레이아웃을 만드는 방법.',
            softWrap: true, // 줄바꿈 여부
          ),
          Padding(
            padding: EdgeInsets.only(top: 10),
          ),
          Icon(
            Icons.alarm_on_outlined,
            color: Colors.green,
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 10),
          ),
          Text(
            '텍스트 영역을 변수로 정의합니다. Container안에 텍스트를 넣고, 사방에 패딩을 넣습니다.',
            softWrap: true, // 줄바꿈 여부
          ),
        ],
      ),
    );

    /* ----------------------------- */
    return MaterialApp(
      title: 'Flutter 레이아웃 테스트',
      home: Scaffold(
        // Scaffold() 위젯은 홈 위젯 트리를 구성하는 기본 요소인 
        // appbar, body, title, bottomNavigationBar 등을 제공
        appBar: AppBar(title: const Text('Flutter 레이아웃 테스트')),
        body: ListView(
          // 스크롤이 가능하도록 Column -> ListView
          children: [
            _buildImageAsset(
                'images/car-sample-01.png', 600, 240, BoxFit.cover),
            titleSection,
            buttonSection,
            _buildImageAsset(
                'images/car-sample-02.png', 600, 140, BoxFit.contain),
            textSection,
          ],
        ),
      ),
    );
  }

  /* ----------------------------- */
  // 이미지 생성 함수
  // 이미지 크기는 double 형으로
  Image _buildImageAsset(
      String image, double iwidth, double iheight, dynamic ifit) {
    return Image.asset(
      image,
      width: iwidth,
      height: iheight,
      fit: ifit,
    );
  }

  /* ----------------------------- */
  // 버튼 생성 함수
  Column _buildButtonColumn(Color color, IconData icon, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min, // 메인축 사이즈
      mainAxisAlignment: MainAxisAlignment.center, // 메인축 정렬
      children: [
        Icon(icon, color: color),
        Container(
            margin: const EdgeInsets.only(top: 8), // padding top
            child: Text(
              label,
              style: TextStyle(
                  fontSize: 12, fontWeight: FontWeight.w400, color: color),
            ))
      ],
    );
  }
}

pubspec.yaml

flutter:

  uses-material-design: true

  assets:
    - images/car-sample-01.png
    - images/car-sample-02.png