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
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
),
),
)
Widget child
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],
)
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"),
)
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
),
),
)
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
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
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
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
)
)
);
}
}
