[Flutter] 앱 레퍼런스 참고하여 Flutter로 화면 구현하기

* 참고 *

[Flutter] 이미지 삽입하기

 

[Flutter] 텍스트 폰트 설정하기

 

---

* 앱 레퍼런스 디자인 참고 *

디자이너스

---

이걸 구현할 예정!!

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(100.0), // AppBar의 높이 설정
          child: AppBar(
            backgroundColor: Colors.white,
            title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'YAYoung',
                  style: TextStyle(
                    color: Color(0xFF104B3A),// #104B3A 색상 지정
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'LilitaOne',
                  ),
                ),
                SizedBox(height: 4),
                Text(
                  '#캠핑을 위한 모든것, 야영에서 함께',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 14,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ],
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.search, size: 30, color: Colors.black),
              ),
            ],
          ),
        ),
        body: SizedBox(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipRRect(
                child: Image.asset(
                  'assets/images/image.png', // 이미지 경로
                  fit: BoxFit.cover,
                  width: double.infinity,
                  height: 400,
                ),
              ),
              SizedBox(height: 16),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  // crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        '+',
                        style: TextStyle(fontSize: 24),
                      ),
                      style: ElevatedButton.styleFrom(
                        foregroundColor: Colors.white,
                        backgroundColor: Color(0xFF104B3A),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        minimumSize: Size(50, 50), // 버튼 크기 설정
                      ),
                    ),
                    SizedBox(width: 16), // 버튼과 텍스트 사이 간격
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '다가오는 캠핑',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '캠핑 일정을 등록해보세요',
                          style: TextStyle(
                            letterSpacing: 1.3,
                            fontSize: 14,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                     Spacer(), // 오른쪽 끝으로 정렬을 위한 Spacer
                    Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.grey,
                      size: 20,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  // crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        '+',
                        style: TextStyle(fontSize: 24),
                      ),
                      style: ElevatedButton.styleFrom(
                        foregroundColor: Colors.white,
                        backgroundColor: Color(0xFF104B3A),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0)
                        ),
                        minimumSize: Size(50, 50), // 버튼 크기 설정
                      ),
                    ),
                    SizedBox(width: 16), // 버튼과 텍스트 사이 간격
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '내가 다녀온 캠핑장',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '다녀온 캠핑장을 등록해보세요',
                          style: TextStyle(
                            fontSize: 14,
                            letterSpacing: 1.3,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                    Spacer(), // 오른쪽 끝으로 정렬을 위한 Spacer
                    Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.grey,
                      size: 20,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.white,
          items: [
            BottomNavigationBarItem(
              label: '',
              icon: Icon(
                Icons.home,
                size: 30,
                color: Color(0xFF0B6121),
              ),
            ),
            BottomNavigationBarItem(
              label: '',
              icon: Icon(
                Icons.terrain,
                size: 30,
                color: Color(0xFF0B6121),
              ),
            ),
            BottomNavigationBarItem(
              label: '',
              icon: Icon(
                Icons.person_outline,
                size: 30,
                color: Color(0xFF0B6121),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

홈화면만 구현해봤는데 다음에는 이벤트도 넣고 더 똑같이 할 수 있도록 해야겠다!

Icon도 다음에는 다운받아서 넣어야지!