openplanning

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

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

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

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: