Flutter 1st app - I am rich

發表於 更新於 分類於 Disqus：
文章字數： 1.9k 所需閱讀時間 ≈ 2 分鐘

create flutter project

modify main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
// main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Center(
        child: Text('Hello world'),
      ),
    ),
  );
}

center image by network

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false, // disable debug banner
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: const Text('I Am Rich'),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: const Center(
          child: Image(
            image: NetworkImage(
                'https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d6b3b18f6.jpeg'),
          ),
        ),
      ),
    ),
  );
}

change to asset image

copy image file to ./images/diamond.png

modify pubspec.yaml(configuration file)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
name: i_am_rich
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.17.1 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
#    - images/diamond.png
#enable all image in /images
    - images/diamond.png

run pubspec.yaml

Pub get

modify

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false, // disable debug banner
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: const Text('I Am Rich'),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: const Center(
          child: Image(image: AssetImage('images/diamond.png')),
        ),
      ),
    ),
  );
}

result

change icon

generate icon

android icon remove and update

ios icon remove and update

alignment android icon

sleect icon

new window

select icon image

align icon

check new icon file

check icon display

before

after