Руководство Flutter Card

Card
Card Example
child
color
shadowColor
elevation
shape
borderOnForeground
margin
semanticContainer
clipBehavior

1. Card

В Flutter, Card - это widget, который используется для создания прямоугольной области с четырьмя закругленными углами и эффектом тени (shadow) по их краям. Card содержит такую информацию, как альбом, географическое местоположение, контактные данные и т. д.

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}
)

Например:

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'),
            ),
          ],
        ),
      ),
    );
  }
}

Если вы хотите настроить размер Card, поместите его в Container или 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

Пример Card с более сложным интерфейсом:

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

Свойство color используется для установки цвета фона Card.

Если это property имеет значениеnull, то используется CardTheme.color из ThemeData.cardTheme. Если CardTheme.color также имеет значение null, то используется ThemeData.cardColor.

Color color

5. shadowColor

shadowColor - это цвет, используемый для рисования тени (shadow) Card.

Color shadowColor

6. elevation

elevation -это координаты вдоль оси Z Card, которые влияют на размер тени (shadow) Card.

Если это property имеет значениеnull, то используется CardTheme.elevation из ThemeData.cardTheme. Если CardTheme.elevation также null, тогда значение по умолчанию равно 1.0.

double elevation

Например:

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

Свойство shape используется для определения формы границы Card.

Если это property имеет значение null, то используется CardTheme.shape изThemeData.cardTheme. Если CardTheme.shape также имеет значение null, то форма будет RoundedRectangleBorder с круглым радиусом угла 4.0.

ShapeBorder shape

Руководство Flutter ShapeBorder

Например:

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

Если borderOnForeground - true, то граница shape будет нарисована перед (in front) child. И наоборот, за child будет нарисована граница (behind).

bool borderOnForeground: true

9. margin

Свойство margin используется для создания пустого пространства вокруг Card.

EdgeInsetsGeometry margin

Руководство Flutter EdgeInsetsGeometry

10. semanticContainer

Если semanticContainer имеет значение true, это означает, что Card и все ее дочерние widget имеют одну и ту же семантику (semantic). Напротив, их семантика различна.

bool semanticContainer: true

11. clipBehavior

Clip clipBehavior

Flutter Clip clipBehavior

Руководство Flutter Card

1. Card

2. Card Example

3. child

4. color

5. shadowColor

6. elevation

7. shape

8. borderOnForeground

9. margin

10. semanticContainer

11. clipBehavior

Pуководства Flutter

Pуководства Flutter

Новейшие статьи