플러터 위젯 기초 총정리 (1) — 화면 구성과 주요 UI 위젯

// 예시 코드 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(leading: Icon(Icons.arrow_back), title: Text('App Bar')),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'PARD'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: 'Schoole'),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Body', style: Theme.of(context).textTheme.headlineLarge),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // 기능을 넣는 곳
        },
        tooltip: 'Increment',
        label: Text('FloatingActionButton'),
        icon: Icon(Icons.thumb_up),
      ),
    );
  }
}

body: Column(
  children: <Widget>[

    // 세로
    Column(
      children: <Widget>[Text('PARD'), Text('with'), Text('app part')],
    ),

    // 가로
    Row(children: <Widget>[Text('PARD'), Text('with'), Text('app part')]),
  ],
),

// 예시 (Column 기준)
Column( mainAxisAlignment: MainAxisAlignment.start, // 위쪽 children: [Text('A'), Text('B'), Text('C')], )

// 예시 (Column 기준)
Column( crossAxisAlignment: CrossAxisAlignment.start, // 왼쪽 정렬 children: [Text('A'), Text('B'), Text('C')], )

// 예시 코드 : lib/HomeStack.dart

import 'package:flutter/material.dart';

class HomeStack extends StatelessWidget {
  const HomeStack({super.key});

  @override
  Widget build(BuildContext contest) {
    return Stack(
      children: [
        Container(
          height: 100,
          width: 100,
          margin: EdgeInsets.all(0),
          color: Colors.amber,
        ),
        Container(
          height: 100,
          width: 100,
          margin: EdgeInsets.all(16),
          color: Colors.blue,
        ),
        Container(
          height: 100,
          width: 100,
          margin: EdgeInsets.all(32),
          color: Colors.pink,
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';

class HomeText extends StatelessWidget {
  const HomeText({super.key});

  @override
  Widget build(BuildContext contest) {
    var name = 'PARD';

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Text의 overflow 발생 X
          Text(
            'Hello, $name! How are you?',
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
          ),

          // 높은 빈공간 박스
          const SizedBox(height: 50),

          // Text의 overflow 발생 O
          SizedBox(
            width: 200,
            child: Text(
              'Hello, $name! How are you?',
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
            ),
          ),
        ],
      ),
    );
  }
}

// 볼드체
TextSpan(
	text : '텍스트 내용',
    style : TextStyle(fontStyle : FontStyle.italic),
),

// 기울임
TextSpan(
	text : '텍스트 내용',
    style : TextStyle(fontWeight : FontWeight.bold),
),

SelectionArea(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: const [
      Text('Hello, We are PARD!', style: TextStyle(fontSize: 25)),
      SelectionContainer.disabled(
        child: Text(
          'Non-selectable text',
          style: TextStyle(fontSize: 25),
        ),
      ),
      Text('Selectable text', style: TextStyle(fontSize: 25)),
    ],
  ),
),

import 'package:flutter/material.dart';

class HomeElevatedButton extends StatelessWidget {
  const HomeElevatedButton({super.key});

  @override
  Widget build(BuildContext contest) {
    return Column(
      children: [
        // Enable
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            textStyle: const TextStyle(fontSize: 20),
            elevation: 10, // 버튼 그림자 깊이 (입체감)
            backgroundColor: Colors.deepOrange,
          ),
          onPressed: () {}, // 클릭 시 실행할 동작 (null이 아니므로 Enabled 상태)
          child: const Text('Enabled'), // 버튼에 표시할 텍스트
        ),

        // Disable
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            textStyle: const TextStyle(fontSize: 20),
          ),
          onPressed: null, // null이면 Disabled 상태 (클릭 불가, 회색 처리)
          child: const Text('Disabled'), // 버튼에 표시할 텍스트
        ),
      ],
    );
  }
}

// Enable
TextButton(
  style: TextButton.styleFrom(
    textStyle: const TextStyle(fontSize: 20),
  ),
  onPressed: () {},
  child: const Text('Enabled', style: TextStyle(color: Colors.blue)),
),

// Gradient
ClipRRect(
  // 자식 위젯을 둥근 사각형 모양으로 잘라내는 위젯
  borderRadius: BorderRadius.circular(4), // 모서리 둥근 정도 (4px radius)
  child: Stack(
    // 여러 위젯을 겹쳐서 배치할 수 있는 위젯
    children: <Widget>[
      Positioned.fill(
        // 부모 영역을 가득 채우도록 배치
        child: Container(
          decoration: const BoxDecoration(
            // BoxDecoration: 배경, 테두리, 그림자 등을 설정
            gradient: LinearGradient(
              // 선형 그라데이션 배경
              colors: <Color>[
                Color(0xFF0D47A1), // 진한 파랑
                Color(0xFF1976D2), // 중간 파랑
                Color(0xFF42A5F5), // 밝은 파랑
              ],
            ),
          ),
        ),
      ),
      TextButton(
        style: TextButton.styleFrom(
          foregroundColor: Colors.white, // 버튼 텍스트/아이콘 색상
          padding: const EdgeInsets.all(16.0), // 버튼 안쪽 여백
          textStyle: const TextStyle(
            fontSize: 20,
          ), // 버튼 텍스트 스타일 (폰트 크기)
        ),
        onPressed: () {}, // 버튼 클릭 시 실행할 동작
        child: const Text('Gradient'), // 버튼에 표시될 텍스트
      ),
    ],
  ),
),

IconButton(
  onPressed: () {},
  icon: const Icon(Icons.android),
  color: Colors.black,
),

// 배경이 있는 IconButton
Ink(
  // 배경 및 도형 스타일 지정
  decoration: const ShapeDecoration(
    color: Colors.deepOrange,
    shape: CircleBorder(),
  ),
  child: IconButton(
    onPressed: () {},
    icon: const Icon(Icons.android),
    color: Colors.white,
  ),
),

import 'package:flutter/material.dart';

// 드롭다운 버튼을 보여주는 StatefulWidget
class HomeDropDown extends StatefulWidget {
  const HomeDropDown({super.key});

  @override
  State<HomeDropDown> createState() => _HomeDropDownState();
}

// 상태(State)를 관리하는 클래스
// 여기서 드롭다운의 현재 선택 값 등 변하는 데이터를 관리
class _HomeDropDownState extends State<HomeDropDown> {
  // 드롭다운에 표시할 문자열 목록
  final List<String> list = <String>['PARD', 'P', 'A', 'R', 'D'];

  // 현재 선택된 값 (초기값 'PARD')
  String dropdownValue = 'PARD';

  @override
  Widget build(BuildContext contest) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min, // Column의 세로 크기를 자식 위젯 최소 높이에 맞춤
        children: <Widget>[
          DropdownButton(
            // 현재 선택된 값
            value: dropdownValue,
            // 드롭다운 오른쪽의 화살표 아이콘
            icon: const Icon(Icons.arrow_drop_down),
            // 드롭다운에서 선택된 항목의 텍스트 스타일
            style: const TextStyle(color: Colors.deepOrange),
            // 드롭다운 아래쪽 밑줄 모양 설정
            underline: Container(height: 2, color: Colors.deepOrange),
            // 값이 변경되었을 때 실행되는 콜백
            onChanged: (value) {
              setState(() {
                // 새로운 값을 상태에 반영하고 UI를 재빌드
                dropdownValue = value!;
              });
            },
            // 드롭다운 항목 리스트 생성
            // list의 각 요소를 DropdownMenuItem으로 변환
            items: list.map<DropdownMenuItem<String>>((item) {
              return DropdownMenuItem(
                value: item, // 해당 항목의 실제 값
                child: Text(item), // UI에 표시할 텍스트
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}​

// asset
Image.asset(
  'assets/flutter-lockup.png',
  width: 300,
  height: 100,
  fit: BoxFit.contain,
),

// network
Image.network(
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDl6MYXHMPJg-VkRIL3oEKwpgSQ9JkUJxWuQ&s',
  width: 300,
  height: 100,
  fit: BoxFit.contain,
),

Scaffold(
  appBar: AppBar(title: Text('Drawer Example')),
  drawer: LayoutDrawer(), // 왼쪽 Drawer
  body: Center(child: Text('메인 화면')),
);

import 'package:flutter/material.dart';

class LayoutDrawer extends StatelessWidget {
  const LayoutDrawer({super.key});

  @override
  Widget build(BuildContext contest) {
    return Drawer( // 좌측 또는 우측에서 슬라이드로 열리는 네비게이션 메뉴 위젯
      child: ListView( // Drawer 내부의 스크롤 가능한 리스트
        padding: EdgeInsets.zero, // 기본 패딩 제거 (상단 여백 제거)
        children: <Widget>[
          const DrawerHeader( // Drawer의 상단 영역 (헤더)
            decoration: BoxDecoration(color: Colors.blue), // 헤더 배경색 설정
            child: Text(
              'Drawer Header', // 헤더에 표시할 텍스트
              style: TextStyle(color: Colors.white, fontSize: 24), // 글자색, 크기
            ),
          ),
          // 첫 번째 메뉴 항목
          ListTile(
            leading: const Icon(Icons.message), // 메뉴 왼쪽에 표시할 아이콘
            title: const Text('Messages'), // 메뉴 텍스트
            onTap: () {}, // 탭했을 때 실행할 동작
          ),
          // 두 번째 메뉴 항목
          ListTile(
            leading: const Icon(Icons.account_circle), // 아이콘
            title: const Text('Profile'), // 텍스트
            onTap: () {}, // 클릭 동작
          ),
          // 세 번째 메뉴 항목
          ListTile(
            leading: const Icon(Icons.settings), // 아이콘
            title: const Text('Settings'), // 텍스트
            onTap: () {}, // 클릭 동작
          ),
        ],
      ),
    );
  }
}

return ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        height: 50,
        color: Colors.deepOrange[600],
        child: const Center(child: Text('Entry A')),
      ),
      Container(
        height: 50,
        color: Colors.deepOrange[300],
        child: const Center(child: Text('Entry B')),
      ),
      Container(
        height: 50,
        color: Colors.deepOrange[100],
        child: const Center(child: Text('Entry C')),
      ),
    ],
  );
}

return ListView(
  padding: const EdgeInsets.all(8),
  children: [
    for (int index = 1; index < 21; index++)
      Container(
        height: 50,
        color: Colors.deepOrange[100],
        child: Center(child: Text('Entry $index')),
      ),
  ],
);

final List<int> entries = <int>[
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
  11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
];

return ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (context, index) {
    return Container(
      height: 50,
      color: Colors.deepOrange[100],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  },
);

final List<int> entries = <int>[
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
  11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
];

return ListView.separated(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (context, index) {
    return Container(
      height: 50,
      color: Colors.deepOrange[100],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  },
  separatorBuilder: (context, index) =>
      const Divider(thickness: 1, color: Colors.orange),
);