실습

clone-coding

• dribble.com의 Sweet Sew를 보고 따라서 만들어보는 연습을 해봅니다.

결과

전체 코드

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:flutter/material.dart';

// main 스레드는 runApp 을 실행시키고 종료됩니다.
void main() {
  // 비동기로 실행됨(이벤트 루프에 등록된다)
  runApp(FirstApp());
  // sleep(Duration(seconds: 2));
  // print("main 종료");
}

class FirstApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Center(
            child: Column(
              children: [
                // SizedBox를 이용해서 여백 주기
                SizedBox(
                  // SizedBox의 높이 설정
                  height: 20,
                ),
                // assets 폴더의 banner 이미지 불러오기
                Image.asset(
                  "assets/banner.jpg",
                  // 이미지의 너비 설정
                  width: 300,
                  // 이미지의 높이 설정
                  height: 400,
                  // 이미지의 비율을 가득차게 설정
                  fit: BoxFit.fill,
                ), // 여백 주기
                SizedBox(height: 20),
                Text(
                  "NeedLework",
                  style: TextStyle(
                    // Text 크기 설정
                    fontSize: 40,
                    // Text 굵기 설정
                    fontWeight: FontWeight.w800,
                  ),
                ),
                // SizedBox를 이용해서 여백 주기
                SizedBox(height: 5),
                Text(
                  "is voguish",
                  style: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.w600,
                  ),
                ), // 여백 주기
                SizedBox(height: 15),
                Text(
                  "Handicraft lessons from",
                  style: TextStyle(
                    // Text 색상 설정
                    color: Colors.black45,
                    fontSize: 18,
                  ),
                ), // 여백 주기
                SizedBox(height: 5),
                Text(
                  "the best designers",
                  style: TextStyle(
                    color: Colors.black45,
                    fontSize: 18,
                  ),
                ), // 여백 주기
                SizedBox(height: 15),
                RaisedButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                  ),
                  child: Container(
                    // 버튼의 너비 설정
                    width: 140,
                    // 버튼의 높이 설정
                    height: 50,
                    alignment: Alignment.center,
                    child: Text(
                      "Get Started",
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                  onPressed: () {
                    print("버튼 클릭됨");
                  },
                  // 버튼의 배경 색상 설정
                  color: Color(0xff262524),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

의문점

• 전체 배경색상은 어떻게 지정하는가?