Basic UI

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

Financial Mobile IOS App

dribbble.com

home의 UI를 만들며 기본적인 UI를 만들어 본다.

먼저 Top부분을 만든다
flutter는 가로로 widget을 배치하면 Row, 세로로 Widget을 쌓을거면 Column을 사용한다.
html, css와 대체적으로 비슷하다.
Top부분만 떼서 본다면 Row에 Icon과 Column이 있다.
그리고 Column안에 2개의 Text가 있는 구조이다.

import 'package:flutter/material.dart';

// main함수를 정의
void main() {
  // root App을 설정
  runApp(const App());
}

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

  // build함수 정의
  @override
  Widget build(BuildContext context) {
    return const MaterialApp( // MaterialApp을 선택
      home: Scaffold( // 구조를 잡기위해 Scaffold Widget사용
        backgroundColor: Color(0xFF181818), // 전체 배경을 검정톤으로 설정
        body: Column( // Widget들이 화면 제일 위에 붙게 하지 않기 위해 빈 박스 설정
          children: [
            SizedBox( // 높이 50인 빈 박스 설정
              height: 50,
            ),
            Padding( // padding은 child를 갖음
              padding: EdgeInsets.symmetric(horizontal: 20), // symetric을 사용해 좌우만 padding 설정
              child: Row( // Row로 기본 틀 설정 children[]을 갖음
                mainAxisAlignment: MainAxisAlignment.spaceBetween, // css의 spacebetween과 동일
                children: [
                  Icon( // icon
                    Icons.abc_rounded,
                    color: Colors.white,
                    size: 50,
                  ),
                  Column( // column
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text( // 1st Text
                        "Hey Mansoor",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 25,
                        ),
                      ),
                      Text( // 2nd Text
                        "Welcome Back",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 15,
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이제 하단의 박스를 만들어 본다.
밑에 또 빈박스를 넣어 사이를 벌려주고 버튼 두개를 만든다.
Text Widget을 사용해 "Total Balance", "\$5 194 382"를 넣어준다.
전체적으로 좌우 공백을 넣어주기 위해 row에만 있던 padding을 전체를 감싸주도록 제일 위로 올린다
그리고 가장 상단의 column에 crossAxisAlignment: CrossAxisAlignment.start를 이용해 widget을 제일 앞으로 붙여준다
하단에 공백을 위해 SizedBox를 넣어준다.
버튼을 만들어야 하는데 두개가 동일한 그림으로 나타난다. 그리고 버튼은 배경색, 텍스트, 텍스트 색만 다르고 모양은 똑같이 나타나므로 위젯을 별도로 만들어 적용한다.
Explorer에 widgets라는 폴더를 만들어 button.dart 파일을 만들어 widget을 만들어 준다.

// lib/main.dart

import 'package:flutter/material.dart';
import 'package:toonflix_action/widget/uibasic_button.dart';

// main함수를 정의
void main() {
  // root App을 설정
  runApp(const App());
}

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

  // build함수 정의
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // MaterialApp을 선택
      home: Scaffold(
        // 구조를 잡기위해 Scaffold Widget사용
        backgroundColor: Color(0xFF181818), // 전체 배경을 검정톤으로 설정
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            // total balance를 제일 앞에 붙이기
            crossAxisAlignment: CrossAxisAlignment.start,
            // Widget들이 화면 제일 위에 붙게 하지 않기 위해 빈 박스 설정
            children: [
              SizedBox(
                // 높이 50인 빈 박스 설정
                height: 50,
              ),
              Row(
                // Row로 기본 틀 설정 children[]을 갖음
                mainAxisAlignment:
                    MainAxisAlignment.spaceBetween, // css의 spacebetween과 동일
                children: [
                  Icon(
                    // icon
                    Icons.abc_rounded,
                    color: Colors.white,
                    size: 50,
                  ),
                  Column(
                    // column
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        // 1st Text
                        "Hey Mansoor",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 25,
                        ),
                      ),
                      Text(
                        // 2nd Text
                        "Welcome Back",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 15,
                        ),
                      ),
                    ],
                  )
                ],
              ),
              SizedBox(
                height: 50,
              ),
              Text(
                "Total Balance",
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                ),
              ),
              Text(
                "\$5 194 382", // $를 문자로 쓰기 위해 "\"앞에 붙이기
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 30),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Button( // 새로 생성한 위젯 적용
                    text: "transfer",
                    bgColor: Colors.amber,
                    textColor: Colors.black,
                  ),
                  Button( // 새로 생성한 위젯 적용
                    text: "request",
                    bgColor: Colors.brown,
                    textColor: Colors.white,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// lib/widgets/button.dart

import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  // 변수 지정
  final String text;
  final Color bgColor;
  final Color textColor;

  //named const: required
  const Button({
    super.key,
    required this.text,
    required this.bgColor,
    required this.textColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container( //button모양으로 만들때는 container를 사용한다. child를 갖는다
      decoration: BoxDecoration( //container를 꾸미기 위해 사용한다
        color: bgColor,
        borderRadius: BorderRadius.circular(45), //둥근 모서리 지정
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 20,
          horizontal: 40,
        ),
        child: Text(
          text,
          style: TextStyle(
            color: textColor,
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}