기사의 목적

Card Widget을 사용할 때 내용물에 Card의 크기를 고정할 수 있는 방법을 설명한다

방법

Card Widget은 기본적으로 child의 콘텐츠의 크기에 따라 크기가 변화한다.
Sizedbox로 둘러싸는 것으로, height, width를 스스로 설정할 수 있다.
아래의 코드에서는 카드 1은 그대로, 카드 2는 Sizedbox로 둘러싸고 스스로 height, width를 설정했다.

코드 예

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        //SafeAreaはスマホの一番上部など被りたくないところにコンテンツを表示させないウィジット
        body: SafeArea(
          //Center widgetを使うことでCardを中央よせすることができる。
          child: Center(
            child: Column(
              //columnの縦の列の並び方を決めるのがmainAxisAlignment
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                //ただのCardを使う場合、childの大きさにCardが自動で設定される。
                Card(
                  child: Text('カード1',style: TextStyle(fontSize: 32.0),),color: Colors.red,),
                //SizedBoxでCardの高さ、幅を設定することができる
                SizedBox(
                  child: Card(
                      child: Center(
                          child: Text('カード2',style: TextStyle(fontSize: 32.0),)),color:Colors.blueAccent),
                  height: 100,
                  width: 200,
                )
              ],
            ),
          ),
        ),
      )
    );
  }
}

SizedBox로 둘러싸는 것은 Card Widget뿐만 아니라 범용성이 높다고 느꼈기 때문에 메모했습니다.
편리하네요!