Flutter 해상도별 Image

참고(resolution 검색)

https://flutter.dev/docs/get-started/flutter-for/android-devs

Flutter for Android developers

 

1. Image를 넣을 폴더...(1)를 만든 후 2.0x...(2), 3.0x...(3), 4.0x...(4) 폴더를 하위에 생성한다.

2. (1)에 원본 Image를 넣고 (2), (3), (4)에 해당 해상도에 맞게 Image를 넣는다. (Image들의 이름은 모두 동일해야 함)

3. pubspec.yaml file에서 flutter: 아래에 "assets: -(1)/[image이름]" 을 추가한다.

4. Image(image: AssetImage('(1)/[image이름]')) Widget을 출력하고 싶은 곳에 넣는다.

Device의 dp에 따라 자동으로 해당 해상도의 image가 출력된다

 

전체코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  ImageSample createState() => ImageSample();
}

class ImageSample extends State<MyHomePage>{
  @override
  Widget build(BuildContext context){
    double appBarHeight = 50.0;
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(appBarHeight),
          child:AppBar(
            title: Text('Image Demo'),
            backgroundColor: Colors.cyan,
          ),
        ),
        body: Image(image: AssetImage('images/1_1.png')),
      ),
    );
  }
}