23.12.29 동계 모각코 2회차 결과

웹은 익숙하다.

하지만 앱은 낯설다.

 

앱 개발을 하기 위해 사용하는 플러터를 시작해보자

 

우선 레이아웃에 대해 먼저 이해해보자

처음 "Hello World"라는 텍스트를 출력하기 위해 아래 구조를 이해할 필요가 있다.

1. main() 함수를 제외하고 모두 삭제
2. MyApp() Stateless widget생성
3. MaterialApp 추가, return 구문의 끝엔 ; 
   MaterialApp을 사용하기 위해서는 material.dart import 해야함.
4. MaterialApp의 속성 설정,
   title:’Workout Tracker’ , String을 표현할 때는 따옴표
   home:HelloWorld()
5. HelloWorld Stateless Widget 생성
6. Scaffold 생성
7. Text widget 사용하여 Hello World 출력
8. hot restart 실행하여 화면 출력
9. 꼭대기 붙어있는 text는 보기 안 좋으니 Center widget 추가하여 가운데로 이동

완성된 모습은 다음과 같다.

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Workout Tracker',
        home:HelloWorld()
    );
  }
}

class HelloWorld extends StatelessWidget {
  const HelloWorld({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

완성된 코드

 

 

다음은 이미지를 출력하도록 해보자

Image file 추가

flutter project root 경로에 /assets 폴더를 만든다.
project명 우클릭 -> New -> Directory

pubspecs.yaml assets 지정

image파일을 pubspecs.yaml파일에 project에서 사용하는 assets로 지정해야한다.
다음과 같이 assets folder를 project의 assets로 지정합니다. path의 끝이 / 로 끝난다.

 

Image Widget의 이미지 경로를 NetworkImage 에서 AssetImage로 바꾸고 경로도 assets 경로로 변경한다.

Image(image: AssetImage('assets/runner.png')),

위와 같이 작성해준다.

완성된 화면

 

여기에 추가로 백그라운드 컬러를 설정할 수 있다.

class LandingPage extends StatelessWidget {
  const LandingPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      body: Center(
        child: Image(
          image: AssetImage('assets/runner.png'),
        ),
      ),
    );
  }
}

완성된 화면