[Flutter3.7][Dart2.19] 화면 그리는 연습 프로젝트 예제

 

1. 작업 환경

 

 - 설치 시도 버전 정보 (당시 최신 버전)

Flutter 3.7.12 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 4d9e56e694 (4 weeks ago) • 2023-04-17 21:47:46 -0400
Engine • revision 1a65d409c7
Tools • Dart 2.19.6 • DevTools 2.20.1

 + 본 글은 lib/main.dart 파일 수정을 전제로 합니다.

 

 

 

 

 

2. 목표 화면

 

 - 프로젝트명 : toonflix

 

 

 

 

 

 

3. 코드 예제

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      backgroundColor: Color(0xFF181818),
      body: Column(
        children: [
          SizedBox(
            height: 60,
          ),
          Row(
            children: [
              SizedBox(
                width: 30,
              ),
              Icon(Icons.person, color: Colors.white, size: 40),
              SizedBox(width: 290),
              Icon(Icons.add, color: Colors.white, size: 40),
            ],
          ),
          SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.start, // 왼쪽 정렬
            children: [
              Container(
                margin: EdgeInsets.only(left: 16),
                padding: EdgeInsets.only(top: 20),
                child: Container(
                  child: Text(
                    "MONDAY 16",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                margin: EdgeInsets.all(10),
                child: Text(
                  "TODAY",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 42,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: Text(
                  "17",
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.5),
                    fontSize: 42,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: Text(
                  "18",
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.5),
                    fontSize: 42,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: Text(
                  "19",
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.5),
                    fontSize: 42,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: Text(
                  "2",
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.5),
                    fontSize: 42,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            margin: EdgeInsets.all(6),
            decoration: BoxDecoration(
                color: Colors.yellow, borderRadius: BorderRadius.circular(45)),
            child: Padding(
                padding: EdgeInsets.symmetric(
                  vertical: 15,
                  horizontal: 20,
                ),
                child: Row(
                  children: [
                    Column(
                      children: [
                        Text(
                          "11",
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          "30",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text("|"),
                        Text(
                          "12",
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          "20",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(width: 20),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 12),
                        Text(
                          "DESIGN",
                          style: TextStyle(
                            fontSize: 54,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        Text(
                          "MEETING",
                          style: TextStyle(
                            fontSize: 54,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: [
                            Text("ALEX",
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.black.withOpacity(0.35),
                                )),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("HELENA",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("NANA",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                          ],
                        ),
                        SizedBox(height: 5),
                      ],
                    ),
                  ],
                )),
          ),
          Container(
            margin: EdgeInsets.all(6),
            decoration: BoxDecoration(
                color: Colors.purple, borderRadius: BorderRadius.circular(45)),
            child: Padding(
                padding: EdgeInsets.symmetric(
                  vertical: 15,
                  horizontal: 20,
                ),
                child: Row(
                  children: [
                    Column(
                      children: [
                        Text(
                          "12",
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          "35",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text("|"),
                        Text(
                          "14",
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          "10",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(width: 20),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 12),
                        Text(
                          "DAILY",
                          style: TextStyle(
                            fontSize: 54,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        Text(
                          "PROJECT",
                          style: TextStyle(
                            fontSize: 54,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: [
                            Text("ME",
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.black.withOpacity(1),
                                )),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("RICHARD",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("CIRY",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("+4",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                          ],
                        ),
                        SizedBox(height: 5),
                      ],
                    )
                  ],
                )),
          ),
          Container(
            margin: EdgeInsets.all(6),
            decoration: BoxDecoration(
                color: Colors.lightGreen,
                borderRadius: BorderRadius.circular(45)),
            child: Padding(
                padding: EdgeInsets.symmetric(
                  vertical: 15,
                  horizontal: 20,
                ),
                child: Row(
                  children: [
                    Column(
                      children: [
                        Text(
                          "15",
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          "00",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text("|"),
                        Text(
                          "16",
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        Text(
                          "30",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(width: 20),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 12),
                        Text(
                          "WEEKLY",
                          style: TextStyle(
                            fontSize: 54,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        Text(
                          "PLANNING",
                          style: TextStyle(
                            fontSize: 54,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: [
                            Text("DEN",
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.black.withOpacity(0.35),
                                )),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("NANA",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 34),
                              child: Text("MARK",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black.withOpacity(0.35),
                                  )),
                            ),
                          ],
                        ),
                        SizedBox(height: 5),
                      ],
                    ),
                  ],
                )),
          ),
        ],
      ),
    ));
  }
}