[Flutter] Column 클래스 소개

다음 Flutter 애플리케이션에서 4개의 자식 위젯이 있는 Column 위젯을 표시할 것입니다. 그 중 2개는 Text 위젯이고 2개는 Icon 위젯입니다. 가로 축을 따라 화면 중앙에 열을 표시하기 위해 Center 위젯에 Column 위젯을 래핑합니다.

main.dart

import 'package:flutter/material.dart';   void main() => runApp(const MyApp());   /// main application widget. class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);     static const String _title = 'Flutter Tutorial';     @override   Widget build(BuildContext context) {     return const MaterialApp(       title: _title,       home: MyStatefulWidget(),     );   } }   /// stateful widget that the main application instantiates class MyStatefulWidget extends StatefulWidget {   const MyStatefulWidget({Key? key}) : super(key: key);     @override   State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); }   /// private State class that goes with MyStatefulWidget class _MyStatefulWidgetState extends State<MyStatefulWidget> {     @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: const Text('Column Widget Tutorial'),       ),       body: Center(           child: Column(             children: const <Widget>[               Text('Text 1', style: TextStyle(fontSize: 24.0),),               Text('Text 2', style: TextStyle(fontSize: 24.0),),               Icon(                 Icons.beach_access,                 color: Colors.pink,                 size: 30.0,               ),               Icon(                 Icons.audiotrack,                 color: Colors.green,                 size: 30.0,               ),             ],           )       ),     );   } }

스크린샷 [안드로이드 에뮬레이터, ios 시뮬레이터]