現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】Cardの使い方|立体的なContainerを作る

Flutter Card

今回は「Card」の基本的な使い方について紹介します。

Cardを使えば立体的なContainerを作成できます!

目次

Cardの基本プロパティ

child

childプロパティでchildを指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card'),
        ),
        body: Center(
          child: Card(
            child: Text(
              'Hello World',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }

color

colorプロパティで背景色を指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card'),
        ),
        body: Center(
          child: Card(
            color: Colors.yellow,
            child: Text(
              'Hello World',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }

margin

marginあり
marginなし

marginプロパティでWidgetの外側に余白を作れます。EdgetInsetsで余白のサイズを指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card'),
        ),
        body: Card(
          color: Colors.yellow,
          margin: EdgeInsets.all(30),
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 50,
            ),
          ),
        ),
      ),
    );
  }
//ソース
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card'),
        ),
        body: Card(
          color: Colors.yellow,
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 50,
            ),
          ),
        ),
      ),
    );
  }

elevation

elevationプロパティで影のサイズを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card'),
        ),
        body: Center(
          child: Card(
            color: Colors.yellow,
            elevation: 10,
            child: Text(
              'Hello World',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }

shadowColor

shadowColorプロパティで影の色を指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card'),
        ),
        body: Center(
          child: Card(
            color: Colors.yellow,
            elevation: 10,
            shadowColor: Colors.redAccent,
            child: Text(
              'Hello World',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }

以上です。

おすすめ記事

  • URLをコピーしました!
目次
閉じる