openplanning

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

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

1- Card

Trong Flutter, Card là một widget được sử dụng để tạo ra một khu vực hình chữ nhật có 4 góc tròn và hiệu ứng bóng đổ (shadow) ở các cạnh của nó. Card chứa thông tin như album, vị trí địa lý, chi tiết liên hệ,...
Card Constructor
const Card(
  {Key key,
  Widget child,
  Color color,
  Color shadowColor,
  double elevation,
  ShapeBorder shape,
  bool borderOnForeground: true,
  EdgeInsetsGeometry margin,
  Clip clipBehavior,
  bool semanticContainer: true}
)
Ví dụ:
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.org',
      debugShowCheckedModeBanner: false,
      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("Flutter Card Example")
      ),
      body: Card (
        margin: EdgeInsets.all(10),
        color: Colors.green[100],
        shadowColor: Colors.blueGrey,
        elevation: 10,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const ListTile(
              leading: Icon (
                  Icons.album,
                  color: Colors.cyan,
                  size: 45
              ),
              title: Text(
                "Let's Talk About Love",
                style: TextStyle(fontSize: 20),
              ),
              subtitle: Text('Modern Talking Album'),
            ),
          ],
        ),
      ),
    );
  }
}
Nếu bạn muốn tuỳ biến kích thước của Card hãy đặt nó trong một Container hoặc SizedBox.
SizedBox (
  width: 300,
  height: 200,
  child: Card (
    margin: EdgeInsets.all(10),
    color: Colors.green[100],
    shadowColor: Colors.blueGrey,
    elevation: 10,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: Icon (
              Icons.album,
              color: Colors.cyan,
              size: 45
          ),
          title: Text(
            "Let's Talk About Love",
            style: TextStyle(fontSize: 20),
          ),
          subtitle: Text('Modern Talking Album'),
        ),
      ],
    ),
  ),
)

2- Card Example

Một ví dụ Card với giao diện phức tạp hơn:
main.dart (ex3)
import 'package:flutter/material.dart';
import 'dart:async';

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 StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  Future<Widget> getImage() async {
    final Completer<Widget> completer = Completer();
    final url = 'https://s3.o7planning.com/images/ha-long-bay.png';
    final image = NetworkImage(url);
    //
    final load = image.resolve(const ImageConfiguration());
    
    // Delay 1 second.
    await Future.delayed(Duration(seconds: 1));

    final listener = new ImageStreamListener((ImageInfo info, isSync) async {
      print(info.image.width);
      print(info.image.height);
      completer.complete(Container(child: Image(image: image)));
    });

    load.addListener(listener);
    return completer.future;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Flutter Card Example")
        ),
        body: Container(
            margin: EdgeInsets.all(10) ,
            child: Column(
              children: <Widget>[
                Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const ListTile(
                        leading: Icon(Icons.place),
                        title: Text('Ha Long Bay'),
                        subtitle: Text('Halong Bay is a UNESCO World Heritage Site and a popular tourist destination'),
                      ),
                      Container(
                        alignment: Alignment.center,
                        child: FutureBuilder<Widget>(
                          future: getImage(),
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              return snapshot.data;
                            } else {
                              return Text('LOADING...');
                            }
                          },
                        ),
                      ) ,
                      ButtonBarTheme ( // make buttons use the appropriate styles for cards
                        data: ButtonBarThemeData(),
                        child: ButtonBar(
                          children: <Widget>[
                            TextButton(
                              child: const Text('Add to Bookmark'),
                              onPressed: () {},
                            ),
                            TextButton(
                              child: const Text('Show More'),
                              onPressed: () {},
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  elevation: 10,
                ),
              ],
            )
        )
    );
  }
}

3- child

Widget child

4- color

Property color được sử dụng để sét đặt mầu nền cho Card.
Nếu property này là null thì CardTheme.color của ThemeData.cardTheme được sử dụng. Nếu CardTheme.color cũng null thì ThemeData.cardColor sẽ được sử dụng.
Color color

5- shadowColor

shadowColor là mầu được sử dụng để vẽ bóng đổ (shadow) của Card.
Color shadowColor

6- elevation

elevation là toạ độ theo trục Z của Card, nó có ảnh hưởng tới kích thước của bóng đổ (shadow) của Card.
Nếu property này null thì CardTheme.elevation của ThemeData.cardTheme được sử dụng. Nếu CardTheme.elevation cũng null thì giá trị mặc định là 1.0.
double elevation
Ví dụ:
elevation (ex1)
Card (
  margin: EdgeInsets.all(10),
  color: Colors.green[100],
  shadowColor: Colors.blueGrey,
  elevation: 20,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      const ListTile(
        leading: Icon (
            Icons.album,
            color: Colors.cyan,
            size: 45
        ),
        title: Text(
          "Let's Talk About Love",
          style: TextStyle(fontSize: 20),
        ),
        subtitle: Text('Modern Talking Album'),
      ),
    ],
  ),
)

7- shape

Property shape được sử dụng để định nghĩa hình dạng đường viền của Card.
Nếu property này là null thì CardTheme.shape của ThemeData.cardTheme sẽ được sử dụng. Nếu CardTheme.shape cũng null thì hình dạng sẽ là RoundedRectangleBorder với bán kính góc tròn là 4.0.
ShapeBorder shape
Ví dụ:
shape (ex1)
Card (
  margin: EdgeInsets.all(10),
  elevation: 20,
  shape: RoundedRectangleBorder(
      side:  BorderSide(color: Colors.green,width: 3),
      borderRadius: BorderRadius.all(Radius.circular(15))
  ),
  shadowColor: Colors.green[100],
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      const ListTile(
        leading: Icon (
            Icons.album,
            color: Colors.cyan,
            size: 45
        ),
        title: Text(
          "Let's Talk About Love",
          style: TextStyle(fontSize: 20),
        ),
        subtitle: Text('Modern Talking Album'),
      ),
    ],
  ),
)

8- borderOnForeground

Nếu borderOnForegroundtrue thì đường viền của shape sẽ được vẽ phía trước (in front) child. Ngược lại đường viền sẽ được vẽ ở phía sau (behind) child.
bool borderOnForeground: true

9- margin

Property margin được sử dụng để tạo ra một khoảng không gian trống bao quanh Card.
EdgeInsetsGeometry margin

10- semanticContainer

Nếu semanticContainertrue, nghĩa là Card và tất cả các widget con của nó có cùng một ngữ nghĩa (semantic). Ngược lại ngữ nghĩa của chúng khác nhau.
bool semanticContainer: true

11- clipBehavior

Clip clipBehavior
  • TODO Link!

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á.