Fluth実習


実習


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

    疑問点

  • の完全な背景色を指定するにはどうすればいいですか?