[Flutter/플러터 공부] 시작 화면 간단히 만들기

간단히 시작화면을 구현해보고자 합니다. 

이미지와 제목 텍스트 그리고 버튼으로 화면 이동이 가능하게 만들어 보겠습니다. 

 

  StartScreen.dart 파일 별도로 만들기

메인 다트 파일에 커스텀 위젯 StartScreen 을 만들어보겠습니다. 그리고 커스텀 위젯에서 화면 구성을 하도록 하겠습니다. 

StartScreen() 위젯은 별도 파일인 /lib/start_screen.dart/ 에 만들겠습니다. 

import 'package:flutter/material.dart';
import 'package:quiz_03/start_screen.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.deepPurple,
                  Colors.purple,
                ],
                begin: Alignment.topLeft,     //그라데이션 방향을 조정합니다. 
                end: Alignment.bottomRight,
              ),
            ),
            child: StartScreen()),  
        //커스텀 위젯을 만듭니다. 
      ),
    ),
  );
}

 

 이미지 삽입하기

이미지를 넣기 위해서는 이미지가 저장되어 있는 폴더를 프로젝트 내에 생성하고 pubspec.yaml 파일에 경로를 설정해주어야 합니다. 

줄맞춤 후 Pub get!!

이미지 파일 폴더 생성하기

yaml 파일에 줄맞춤하여 이미지 경로 설정하기

import 'package:flutter/material.dart';

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

  @override
  Widget build(context) {
    return Center(
      child: Column(               //텍스트, 버튼을 위해 Column 으로 감쌌습니다. 
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            'assets/images/rainbow.png',   //이미지 넣었습니다. 
            width: 200,    //이미지 사이즈 조정하였습니다. 
          ),
        ],
      ),
    );
  }
}

 

  텍스트 넣기

텍스트는 위 children 위젯아래에 넣으면 됩니다. 

import 'package:flutter/material.dart';

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

  @override
  Widget build(context) {
    return Center(
      child: Column(
        //텍스트, 버튼을 위해 Column 으로 감쌌습니다.
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            'assets/images/rainbow.png', //이미지 넣었습니다.
            width: 200, //이미지 사이즈 조정하였습니다.
          ),
          SizedBox(height: 60),    //이미지와 간격을 위해 활용하였습니다. 
          Text(
            'Golf Course Weather',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}

 

  버튼 넣기

보통 앱은 splash 화면 후 자동으로 넘어갈텐데 공부를 위해 버튼을 넣어보겠습니다. 

텍스트와 마찬가지고 하단에 SizedBox 를 넣어 적절한 간격을 주고 버튼을 삽입하겠습니다. 

import 'package:flutter/material.dart';

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

  @override
  Widget build(context) {
    return Center(
      child: Column(
        //텍스트, 버튼을 위해 Column 으로 감쌌습니다.
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            'assets/images/rainbow.png', //이미지 넣었습니다.
            width: 200, //이미지 사이즈 조정하였습니다.
          ),
          SizedBox(height: 60), //이미지와 간격을 위해 활용하였습니다.
          Text(
            'Golf Course Weather',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 30),
          OutlinedButton.icon(
            //다양한 버튼이 있는데 그 중 골라 쓰면 됩니다.
            onPressed: () {},
            style: OutlinedButton.styleFrom(
              foregroundColor: Colors.white,
            ),
            icon: Icon(Icons.ac_unit_outlined), //아이콘과 함께 텍스트를 넣었습니다.
            label: Text('날씨 확인'),
          ),
        ],
      ),
    );
  }
}