[Flutter] Basic Flutter layout concepts

📎 Flutter 공식 홈페이지 Codelab 링크

Part1

Exercise: Create the name and title

Implement a Column that contains two text widgets:
The first Text widget has the name Flutter McFlutter and the style property set to Theme.of(context).textTheme.headline5.
The second Text widget contains the title Experienced App Developer.
For the Column, set mainAxisSize to MainAxisSize.min and crossAxisAlignment to CrossAxisAlignment.start.

👩🏻‍💻 코드

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Flutter McFlutter',
          style: Theme.of(context).textTheme.headline5,
          ),
        Text(
          'Experienced App Developer',
          ),
        ],
      );
  }
}

👇🏻 결과 화면

Exercise: Wrap the Column in a Row

Wrap the Column you implemented in a Row that contains the following widgets:

• An Icon widget set to Icons.account_circle and with a size of 50 pixels.
• A Padding widget that creates a space of 8 pixels around the Icon widget.

To do this, you can specify const EdgeInsets.all(8.0) for the padding property.

👩🏻‍💻 코드

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Icon(Icons.account_circle, size:50),
          ),
        Column(
          mainAxisSize: MainAxisSize.min,
        	crossAxisAlignment: CrossAxisAlignment.start,
        	children: [
         		Text(
            		  'Flutter McFlutter',
            		   style: Theme.of(context).textTheme.headline5,
          		),
          		Text('Experienced App Developer'),
      		],
       	),
     	],
    );
  }
}

👇🏻 결과 화면

Part2

Exercise: Tweak the layout

Wrap the Row in a Column that has a mainAxisSize property set to MainAxisSize.min and a crossAxisAlignment property set to CrossAxisAlignment.stretch. The Column contains the following widgets:

• A SizedBox widget with a height of 8.
• An empty Row where you’ll add the contact information in a later step.
• A second SizedBox widget with a height of 16.
• A second empty Row where you’ll add four icons (Part 3).

👩🏻‍💻 코드

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.account_circle, size: 50),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Flutter McFlutter',
                style: Theme.of(context).textTheme.headline5,
              ),
              Text('Experienced App Developer'),
            ],
          ),
        ], 
    ),// Row
    SizedBox(height: 8),
    Row(), // First empty Row
    SizedBox(height: 16),
    Row(), // Second empty Row
    ],
    );    // Closing parenthesis for the Column that wraps the Row
  
  }
}

👇🏻 결과 화면

Exercise: Enter contact information

Enter two Text widgets inside the first empty Row:
The first Text widget contains the address 123 Main Street.
The second Text widget contains the phone number (415) 555-0198.
For the first empty Row, set the mainAxisAlignment property to MainAxisAlignment.spaceBetween.

👩🏻‍💻 코드

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(Icons.account_circle, size: 50),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Flutter McFlutter',
                  style: Theme.of(context).textTheme.headline5,
                ),
                Text('Experienced App Developer'),
              ],
            ),
          ],
        ),
        SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
                '123 Main Street',
              ),
            Text(
                '(415) 555-0198',
              ),
          ],
        ),
        SizedBox(height: 16),
        Row(
          children: [],
        ),
      ],
    );
  }
}

👇🏻 결과 화면

Part3

Exercise: Add four icons

Enter the following Icon widgets inside the second empty Row:

• Icons.accessibility
• Icons.timer
• Icons.phone_android
• Icons.phone_iphone

For the second empty Row, set the mainAxisAlignment property to MainAxisAlignment.spaceAround.

👩🏻‍💻 코드

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(Icons.account_circle, size: 50),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Flutter McFlutter',
                  style: Theme.of(context).textTheme.headline5,
                ),
                Text('Experienced App Developer'),
              ],
            ),
          ],
        ),
        SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('123 Main Street'),
            Text('415-555-0198'),
          ],
        ),
        SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Icon(
              Icons.accessibility,
              ),
            Icon(
              Icons.timer,
              ),
            Icon(
              Icons.phone_android,
              ),
            Icon(
              Icons.phone_iphone,
              ),
          ],
        ),
      ],
    );
  }
}

👇🏻 결과 화면