[Flutter] 플러터 이미지(image) 넣기 + AppBar 만들기

이번 프로젝트의 구조도입니다. 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text('I Am Poor'),
        backgroundColor: Colors.black12,
      ),
      body: Center(
        child: Image(
          image: AssetImage('images/coal.png'),
        ),
      ),
    ),
  ));
}

이번 프로젝트의 코드입니다. 

 

 

MaterialApp안에

Scaffold라는 layout 위젯을 넣어주면

appBar,  Body, BottomNavigationBar, FloatingActionButton 등을 사용할 수 있습니다.

 

backgroundColor를 통해 grey색으로 지정해줍니다. 

 

 

그러면 이런 회색 바탕의 화면이 나오게 됩니다. 

 

다음은 appBar를 만들어줍니다.

appBar의

backgroundColor와 Title을 통해 색과 글자를 넣어줍니다.

 

appBar 완성입니다.

 

이제 간단한 이미지를 넣어보겠습니다.

우선 images라는 폴더를 하나 만들어줍니다.

 

그 다음으로 원하는 이미지파일을 images에 넣어줍니다.

 

그 다음 pubspec.yaml로 이동합니다.

그 다음 assets에 이미지파일의 경로를 입력시켜줍니다.

 

body를 center값으로 정해준 뒤에 image를 넣습니다. 

 

첫번째 앱 완성!