Hướng dẫn và ví dụ Flutter CircleAvatar

CircleAvatar
child
backgroundColor
backgroundImage
foregroundColor
radius
minRadius
maxRadius
onBackgroundImageError

1. CircleAvatar

CircleAvatar đơn giản là một vòng tròn trong đó chúng ta có thể thêm màu nền, hình nền hoặc một văn bản. Nó thường đại diện cho người dùng với hình ảnh của anh ấy hoặc bằng tên viết tắt của anh ấy. Mặc dù chúng ta có thể tạo một widget tương tự ngay từ đầu, nhưng widget này rất hữu ích trong việc phát triển nhanh một ứng dụng.

CircleAvatar Constructor

const CircleAvatar(
    {Key key,
    Widget child,
    Color backgroundColor,
    ImageProvider<Object> backgroundImage,
    void onBackgroundImageError(
        dynamic exception,
        StackTrace stackTrace
    ),
    Color foregroundColor,
    double radius,
    double minRadius,
    double maxRadius}
)

Hãy bắt đầu với một CircleAvatar đơn giản bao gồm một ảnh nền được cung cấp và mầu nền mặc định.

(ex1)

CircleAvatar(
  radius: 100,
  backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
)

Về cơ bản CircleAvatar không cung cấp một property nào để thiết lập viền, tuy nhiên bạn có thể bọc nó trong một CircleAvatar khác với bán kính lớn hơn và mầu nền khác để tạo ra một thứ tương tự như viền.

(ex2)

CircleAvatar(
    radius: 110,
    backgroundColor: Color(0xffFDCF09),
    child: CircleAvatar(
      radius: 100,
      backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
    )
)

Ví dụ: Một CircleAvatar với tên viết tắt của người dùng (user's initials).

(ex3)

CircleAvatar(
  radius: 110,
  backgroundColor: Colors.greenAccent[400],
  child: Text(
    'TVH',
    style: TextStyle(
        fontSize: 90,
        color: Colors.white
    ),
  ),  
)

2. child

Widget child

3. backgroundColor

backgroundColor - Mầu nền của CircleAvatar.

Giá trị mặc định của backgroundColor là ThemeData.primaryColorLight nếu foregroundColor (mầu chữ) là tối, là ThemeData.primaryColorDark nếu foregroundColor là sáng.

Color backgroundColor

Ví dụ:

backgroundColor (ex1)

CircleAvatar(
  radius: 110,
  backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
  backgroundColor: Colors.cyan[100],
)

4. backgroundImage

backgroundImage - Hình ảnh nền của CircleAvatar, nó chính là hình đại diện của người dùng.

Nếu bạn muốn hiển thị tên viết tắt của người dùng (user's initials) trên CircleAvatar hãy sử dụng property child.

ImageProvider<Object> backgroundImage

Hướng dẫn và ví dụ Flutter ImageProvider

backgroundImage (ex1)

CircleAvatar(
  radius: 110,
  backgroundImage: NetworkImage("https://s3.o7planning.com/images/boy-128.png"),
)

5. foregroundColor

foregroundColor - Mầu sắc mặc định của văn bản trong CircleAvatar.

Giá trị mặc định của foregroundColor là ThemeData.primaryColorLight nếu backgroundColor (mầu nền) là tối, là ThemeData.primaryColorDark nếu backgroundColor là sáng.

Color foregroundColor

Ví dụ:

foregroundColor (ex1)

CircleAvatar(
  radius: 110,
  foregroundColor: Colors.red,
  child: Text(
    'TVH',
    style: TextStyle(
        fontSize: 90
    ),
  ),
)

6. radius

radius - Bán kính của đường tròn CircleAvatar.

Nếu radius được chỉ định thì không thể chỉ định minRadius và maxRadius. Chỉ định radius cũng tương đương với chỉ định giá trị cho minRadius và maxRadius, tất cả chúng có cùng một giá trị.

double radius

7. minRadius

minRadius - Bán kính tối thiểu của CircleAvatar.

Nếu minRadius được chỉ định thì radius sẽ không được chỉ định. Flutter sẽ tự động tính toán kích thước phù hợp cho CircleAvatar dựa trên khoảng không gian sẵn có.

double minRadius

8. maxRadius

maxRadius - Bán kính tối đa của CircleAvatar.

Nếu maxRadius được chỉ định thì radius sẽ không được chỉ định. Flutter sẽ tự động tính toán kích thước phù hợp cho CircleAvatar dựa trên khoảng không gian sẵn có.

double maxRadius

9. onBackgroundImageError

onBackgroundImageError - Một hàm callback tuỳ chọn, được gọi khi xẩy ra lỗi tải ảnh cho backgroundImage.

void onBackgroundImageError(
    dynamic exception,
    StackTrace stackTrace
)

Ví dụ: Một CircleAvatar cố gắng hiển thị ảnh đại diện của người dùng, nếu có lỗi trong quá trình tải ảnh nó sẽ hiển thị một văn bản lỗi.

onBackgroundImageError (ex1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
      return _MyHomePageState();
  }

}

class _MyHomePageState extends State<MyHomePage> {

  // String imageUrl = "https://s3.o7planning.com/images/boy-128.png";
  String imageUrl = "https://file-not-found";
  bool _loadImageError = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Flutter CircleAvatar Example")
        ),
        body: Center (
            child: CircleAvatar(
              radius: 100,
              backgroundImage: this._loadImageError? null: NetworkImage(this.imageUrl),
              onBackgroundImageError: this._loadImageError? null:
                       (dynamic exception, StackTrace stackTrace) {
                  print("Error loading image! " + exception.toString());
                  this.setState(() {
                      this._loadImageError = true;
                  });
              },
              child: this._loadImageError? Text("Error loading image!") : null
            )
        )
    );
  }
}