openplanning

Hướng dẫn sử dụng Flutter CircleAvatar

Xem thêm các chuyên mục:

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 backgroundColorThemeData.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
  • TODO Link?
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 foregroundColorThemeData.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 minRadiusmaxRadius. Chỉ định radius cũng tương đương với chỉ định giá trị cho minRadiusmaxRadius, 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
            )
        )
    );
  }
}

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.