Hình ảnh từ web

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 27 trên 32.

Image.network hiển thị một hình ảnh từ địa chỉ web:

Image.network('https://picsum.photos/id/10/300/200')

Ứng dụng tải hình ảnh trong khi chạy, nên hình ảnh có thể xuất hiện sau các phần khác trên màn hình một chút. width: đặt chiều rộng khi hiển thị, còn chiều cao sẽ tự điều chỉnh để giữ nguyên hình dạng:

Image.network('https://picsum.photos/id/10/300/200', width: 150)

Để hiển thị hình ảnh có sẵn bên trong ứng dụng, hãy dùng Image.asset. Bạn sẽ gặp phần này khi tự xây dựng một dự án.

Thử thách

Dễ

Hiển thị hình ảnh này phía trên chú thích, làm phần tử con đầu tiên của Column:

https://picsum.photos/id/237/300/200

Tự làm thử

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('A good dog', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}