codestory

Die Anleitung zu Flutter Card

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

1- Card

In Flutter ist Card ein Widget, mit dem ein rechteckiger Bereich mit vier abgerundeten Ecken und einem Schatteneffekt an den Kanten erstellt wird. Card enthält die Informationen wie Album, geografischer Position, Kontaktdaten...
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}
)
Zum Beispiel:
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'),
            ),
          ],
        ),
      ),
    );
  }
}
Wenn Sie die Größe von Card anpassen möchten, legen Sie sie in einem Container oder 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

Ein Beispiel von Card mit mehr komplizierten Interface:
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

Das Property color wird benutzt um die HIntergrundsfarbe für Card einzusetzen.
Wenn das Property null ist, wird CardTheme.color von ThemeData.cardTheme benutzt. Wenn CardTheme.color auch null  ist, wird ThemeData.cardColor verwendet.

Color color

5- shadowColor

shadowColor ist die Farbe, die verwendet wird,  Schatten (shadow) von Card ​​​​​​​zu zeichen

Color shadowColor

6- elevation

elevation sind die Koordinate entlang der Achse Z von Card, die sich auf die Größe des Schatten von Card auswirken.
Wenn das Property null ist, wird CardTheme.elevation von ThemeData.cardTheme verwendet. Wenn CardTheme.elevation auch null ist, beträgt die Standardwert 1.0.

double elevation
Zum Beispiel:
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

Das Property shape wird benutzt um die Form der Ränder von Card zu definieren.
Wenn das  Property null ist, wird CardTheme.shape von ThemeData.cardTheme verwendet. Wenn CardTheme.shape auch null ist, wird die Form ein RoundedRectangleBorder mit der abgerundeten Ecke Radius in Höhe von 4.0 sein.

ShapeBorder shape
  • TODO Link?
Zum Beispiel:
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

Wenn borderOnForeground  true ist, wird der Rand von shape vor child gezeichnet. Umgekehrt wird hinter child der Rand gezeichnet.

bool borderOnForeground: true

9- margin

Das Property margin wird benutzt um einen leeren Raum um Card herum zu erstellen.

EdgeInsetsGeometry margin

10- semanticContainer

Wenn semanticContainer  true ist, d.h Card und seine allen untergeordneten Widgets haben dieselben Semantik (semantic) haben. Umgekehrt ist ihre Semantik unterschiedlich.

bool semanticContainer: true

11- clipBehavior


Clip clipBehavior

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.