[Flutter] UI 그리기 연습(1)

- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다.

https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App

Financial Mobile IOS App

 

- 최종 완성본 모습

출처 - https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App

 

- 코드 설명 (코드 작성 순서로)

1. Scaffold 클래스 안에 appbar 속성은 존재하지 않으므로 사용할 필요가 없고 body와 backgroundColor를 사용합니다.
2. body속성은 Widget으로 이루어져 있기 때문에 위젯들을 담기위해 Column(1번)으로 위젯을 생성합니다. (Row로 body 컨테이너를 만들 수 있을 듯)
3. Column(1번) 위젯은 children 속성을 필수로 사용해야 하는데, children 속성은 위젯들을 다시 리스트안에 넣어 사용한다. (Row도 마찬가지)
4. "Hey, Selena", "Welcome back" 두 스트링은 하나의 행(Row)에 있다고 볼 수 있습니다. Row 위젯을 3번 children 리스트안에 정의합니다. Row 위젯 또한 children 속성이 필수기 때문에 children 속성을 사용합니다. (※완성본 이미지 참고)
5. 4번에서 Row 위젯의 children안에 다시 Column(2번) 위젯을 사용하는데, "Hey, Selena"과 "Welcome back"은 두개의 층으로 볼 수 있습니다. 각 스트링을 컨트롤하기 위해서는 마지막으로 Column(2번)을 한번 더 사용합니다. 역시 children 속성을 사용하는데 그 안에 "Hey, Selena"와 "Welcome back"을 표현하는 Text 위젯이 두개 사용됩니다. (children 속성은 리스트이기 때문에 가능)
6. Text의 속성으로 스트링을 꾸미고 두 글자를 Row속성중 mainAxisAlignment을 이용해 오른쪽 정렬합니다. "Welcome back" 글자를 오른쪽 정렬 하기위해 Column(2번) 속성중 crossAxisAlignment 으로 오른쪽 정렬합니다.
7. 스트링 위쪽 공간이 필요하기 때문에 Column(1번) 의 children안에 SizedBox를 통해 여백을 줍니다.
8. 스트링의 오른쪽에도 여백이 필요하기 때문에 Column(1번)을 Padding 위젯으로 감싸고 padding 속성으로 좌, 우 여백을 줍니다.
9. 끝!

 

// lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFF181818),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column( // 1번 Column
            children: [
              const SizedBox(height: 80),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Column( // 2번 Column
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      const Text(
                        "Hey, Yegin",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 26,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                      Text(
                        "Welcome back",
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.4),
                          fontSize: 18,
                        ),
                      ),
                    ],
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

 

 

- UI 그리기 연습(1) 완성본