[Flutter] Card

Card : 앨범, 주소, 연락처 등 세부사항과 일부 관련 정보를 같이 표시하는데에 사용하며, 디자인 요소가 추가된 컨테이너라고 볼 수 있다. 또한, 액션 이벤트를 갖고있지않기때문에, 액션이벤트가 필요할 경우, 다른 위젯들과 같이 사용해야한다.

---

Card

 

---

main.dart

 

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> entries = <String>['1', '2', '3'];
  final List<int> colorCodes = <int>[700, 400, 100];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MINOKUMA - FLUTTER'),
      ),
      body: Center(
        child: Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.music_video),
                title: Text('뮤직 비디오를 이용해보세요.'),
              ),
              ButtonBar(
                children: [
                  FlatButton(
                    onPressed: () {},
                    child: Text('신청하기'),
                    color: Colors.blueAccent,
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Text('취소하기'),
                    color: Colors.pink,
                  )
                  ],
              ),
            ],
          ),
        ),
      )
    );
  }
}

 

리스트 타일 1개와 버튼 바 1개 (플랫 버튼 2개 구성) 를 배치