이번에는 Flutte에서 이미지를 표시하는 방법에 대해 설명합니다.

이미지 준비

저장할 이미지를 준비합시다.

이번에는 아래와 같은 이미지를 준비했습니다.
이 이미지를 이번에 표시하겠습니다.

이미지 도입

다음에 이미지의 도입을 합시다.

pubspec.yaml을 열고 다음과 같은 설명을 추가합니다.

flutter:
  uses-material-design: true

  assets: //追加
    - assets/images/hime.jpg //追加

이번에는 assets/images라는 디렉토리를 만들고 그 안에 이미지를 저장합니다.

여러 이미지를 저장하려면

flutter:
  uses-material-design: true
  assets:
    - assets/images/hime.jpg
    - assets/images/...
    - assets/images/...

같은 형태로 추가할 수 있습니다. (디렉토리의 이름은 각각 자신의 이름에 맞게 변경하십시오)

그런 다음 Android Studio 상단의 pub get 버튼을 클릭하거나 다음 명령을 작성 프로젝트에서 실행합니다.flutter pub get
이것으로 이미지 도입이 완료되었습니다.

이미지 표시

이제 실제 이미지를 표시해 봅시다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('画像表示'),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Image.asset('assets/images/hime.jpg'),
        ]),
      ),
    );
  }
}

위 소스에서


이런 식으로 이미지를 볼 수있었습니다.

수고하셨습니다.
여기까지 보아 주셔서 감사합니다.