Flutter UI Design - (2)

 

Flutter UI Design

 

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF181818), // 배경색을 검은색(0xFF181818)으로 설정
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 28), // 가로 여백 추가
          child: Column(
            children: [
              SizedBox(
                height: 80, // 상단에 80 픽셀 높이의 여백 추가
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end, // 텍스트를 오른쪽 정렬
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "Hey, Arang", // 사용자 이름 텍스트
                        style: TextStyle(
                          color: Colors.white, // 흰색 글자
                          fontSize: 28, // 글자 크기
                          fontWeight: FontWeight.w800, // 글자 두껍게
                        ),
                      ),
                      Text(
                        "Welcome back", // 환영 메시지 텍스트
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8), // 흰색 투명도 0.8인 글자
                          fontSize: 16, // 글자 크기
                        ),
                      ),
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

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

 - main함수 : runApp(App())함수는 App클래스를 실행하여 앱을 시작한다.

 

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

 - App클래스 : StatelessWidget클래스를 상속한 위젯으로 build 매서드는 앱의UI를 빌드하고 MaterialApp 위젯은 앱의 뼈대를 제공하여 앱의 기본적인 테마를 설정할수 있도록 한다.

 

home: Scaffold(
        backgroundColor: Color(0xFF181818),
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 28),
          child: Column(
            children: [
              SizedBox(
                height: 80,
              ),

 - Scaffold 위젯 : 앱의 기본구조를 제공하고 backgroundColor : Color(0xFF181818) 검정색으로 설정한다.

 - Padding 위젯 : 자식위젯에 여백을 추가한다. EdgeInsets.symmetric(horizontal : 28) 수평방향 28픽셀의 여백을 추가한다.

 - Column 위젯 : 자식위젯들을 세로로 배열한다.

 - SizeBox 위젯 : tkdeks 80 필셀 높이의 여백을 추가한다.

 

Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "Hey, Arang",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 28,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                      Text(
                        "Welcom back",
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 16,
                        ),

 - Row 위젯 : 자식위젯들을 가로로 배열하여 mainAxisAlignment속성을 사용하여 텍스트를 오른쪽으로 정렬한다.

 - Column 위젯 : 자식위젯들을 세로로 배열하여 crossAxisAlignment속성을 사용하여 텍스트를 오른쪽으로 정렬한다.

 - Text 위젯 : style속성을 사용하여 글자색상, 크기, 두께를 설정한다.

 

Android 휴대폰에서 실행시킨 화면