flutter-나만의 명함 만들기(1)

StatefulWidget:

상태를 가지고 있으며 화면의 상태를 변경할 수 있는 기능을 제공

StatelessWidget:

화면의 상태를 변경할 수 없음

Scaffold:

앱 구조를 제공하는 위젯

-AppBar (앱 바): 상단에 위치하며 앱의 제목, 아이콘, 메뉴 버튼 등을 표시할 수 있는 영역

-Body (바디): 중심에 위치하며 앱의 주요 콘텐츠를 표시하는 영역

-FloatingActionButton (플로팅 액션 버튼): 앱의 핵심 작업을 수행하는 버튼으로, 일반적으로 화면의 한쪽 아래에 위치

-BottomNavigationBar (바텀 네비게이션 바): 화면 하단에 탭으로 구성된 네비게이션 바

-Drawer (드로어): 화면의 좌측 또는 우측에서 나타나는 슬라이딩 메뉴

-SnackBar (스낵바): 화면 하단에 일시적인 메시지를 표시하는데 사용

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_application/main_screen.dart';
import 'package:flutter_application/splash_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     title: '비지니스 카드',
     debugShowCheckedModeBanner: false,
     initialRoute: '/',
     routes: {
      '/':(context) => SplashScreen(),
      '/main':(context) => MainScreen(),
     },
    );
  }
}

1. debugShowCheckedModeBanner: false->디버그 배너를 숨기는 기능
2. routes: {
   '/':(context) => SplashScreen(),
   '/main':(context) => MainScreen(),
   },
   ->화면 이동 기능

splash_screen.dart

import 'package:flutter/material.dart';

//시작 화면
class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration(seconds: 3),(){
     Navigator.pushReplacementNamed(context, '/main');
    },);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/user.png',
              width: 180,
              height: 180,
            ),
            Container(
              margin: EdgeInsets.only(top: 32),
              child: Text(
                'Business Card',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

1. Future.delayed(Duration(seconds: 3),(){
   Navigator.pushReplacementNamed(context, '/main');
   },);
   ->3초 뒤에 main_screen.dart로 이동
   Navigator.pushReplacementNamed->새로운 화면으로 이동하는 메서드
2. Column: 세로로 여러 위젯을 배치
3. mainAxisAlignment: MainAxisAlignment.center : 축을 기준으로 위젯을 가운데 정렬
4. Image.asset: 앱 내부의 이미지 파일을 로드하는 위젯
5. Container: 다양한 스타일을 적용하고 간격을 조절하기 위해 사용