Hướng dẫn và ví dụ Flutter Banner
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
Trong Flutter, Banner là thông điệp chéo (diagonal message) hiển thị ở phía trên bề mặt và tại một góc của một Widget khác. Banner thường được sử dụng để trang trí và làm nổi bật một thông điệp liên quan tới một Widget này.
Banner Constructor:
Banner Constructor
const Banner(
{Key key,
Widget child,
@required String message,
TextDirection textDirection,
@required BannerLocation location,
TextDirection layoutDirection,
Color color: _kColor,
TextStyle textStyle: _kTextStyle}
)
main.dart (ex1)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'o7planning',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("Banner Example"),
),
body: Container(
padding: EdgeInsets.all(16),
child: Align(
alignment: Alignment.topCenter,
child: Banner (
message: 'Offer 20% off',
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
height: 186,
width: 280,
child: Image.network(
'https://raw.githubusercontent.com/o7planning/rs/master/flutter/fast_food.png',
fit: BoxFit.cover,
),
),
),
),
)
);
}
}
Property child được sử dụng để định nghĩa nội dung nằm dưới "banner". Trong hầu hết các trường hợp sử dụng nó là một Widget chứa một hình ảnh.
Widget child
child cũng có thể là một nội dung hỗn hợp bao gồm hình ảnh và văn bản:
main.dart (child ex2)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'o7planning',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("Banner Example"),
),
body: Banner (
message: 'Offer 20% off',
location: BannerLocation.topStart,
color: Colors.red,
child: Container(
height: 150,
width: double.infinity,
color: Colors.lightGreen,
child: Padding (
padding: EdgeInsets.all(16),
child: Row (
children: [
Image.network (
"https://raw.githubusercontent.com/o7planning/rs/master/flutter/fast_food.png"
),
SizedBox(width: 10),
Column (
children: [
Text("Fast Food",style: TextStyle(fontSize: 30, color: Colors.blue)),
SizedBox(height: 10),
Text("Description ....", style: TextStyle(fontStyle: FontStyle.italic))
],
)
],
),
),
),
)
);
}
}
Property message định nghĩa một thông điệp hiển thị trên "banner".
@required String message
Property layoutDirection được sử dụng để chỉ định hướng của bố cục. Mặc định là giá trị của nó là TextDirection.ltr (Left to Right).
TextDirection layoutDirection
// Enum values:
TextDirection.ltr // Left to Right (Default)
TextDirection.rtl // Right to Left
Khái niệm Layout Direction (Hướng của bố cục) giúp tạo ra ứng dụng phù hợp với các ngôn ngữ và nền văn hóa khác nhau. Cụ thể tiếng Anh được viết từ trái sang phải, trong khi đó tiếng Ả Rập được viết từ phải sang trái.
Property location được sử dụng để chỉ định vị trí hiển thị "banner", nó có thể nhận một trong 4 giá trị sau:
- BannerLocation.topStart
- BannerLocation.topEnd
- BannerLocation.bottomStart
- BannerLocation.bottomEnd
@required BannerLocation location
Nếu hướng của bố cục (Layout Direction) là từ Trái sang Phải:
- layoutDirection: TextDirection.ltr (Default)
Nếu hướng của bố cục (Layout Direction) là từ Phải sang Trái:
- layoutDirection: TextDirection.rtl
Property color được sử dụng để chỉ định mầu sắc cho "banner".
Color color: _kColor
Property textStyle được sử dụng để chỉ định kiểu dáng văn bản hiển thị trên "banner".
TextStyle textStyle: _kTextStyle
Ví dụ:
textStyle: TextStyle(fontSize: 20)
textStyle: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
color: Colors.yellow
)
- TODO Link?
TextDirection textDirection
// Enum Values:
TextDirection.ltr // Left to Right
TextDirection.rtl // Right to Left
