Digital Nomad and FIRE

🔍 ElevatedButton이란?

ElevatedButton은 그림자(shadow)가 있는 입체감 있는 버튼으로, Material Design 스타일을 따릅니다.

📙 버튼 스타일 종류 - Material Design Buttons

(코드 샘플)

ElevatedButton(
  onPressed: () {
    print('버튼이 눌렸어요!');
  },
  child: Text('눌러보세요'),
)

(결과)

🧱 기본 구조

ElevatedButton의 생성자는 아래와 같은 구조를 가집니다:

ElevatedButton({
  required VoidCallback? onPressed,
  VoidCallback? onLongPress,
  ButtonStyle? style,
  FocusNode? focusNode,
  bool autofocus = false,
  Clip clipBehavior = Clip.none,
  required Widget child,
})

• onPressed: 버튼이 눌렸을 때 호출되는 콜백 (null이면 버튼 비활성화)

• child: 버튼 내부에 표시될 위젯 (보통은 Text)

• style: 버튼의 색상, 테두리, 그림자 등을 커스터마이징 가능

🎨 스타일 커스터마이징

style 속성을 사용하면 버튼을 다양하게 꾸밀 수 있습니다.

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,       // 배경색
    foregroundColor: Colors.white,      // 텍스트 & 아이콘 색
    shadowColor: Colors.black,          // 그림자 색
    elevation: 8,                        // 버튼 입체감
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    ),
    textStyle: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
  ),
  child: Text('스타일 적용된 버튼'),
)

(결과)

Flutter 앱을 개발하면서 가장 자주 사용 되는 UI 요소 중 하나가 바로 스크롤 가능한 리스트, ListView 입니다.

📌 ListView란?

ListView는 Flutter에서 수직 혹은 수평으로 스크롤 가능한 리스트 뷰를 제공하는 위젯 입니다. 빌더 패턴을 활용해 동적으로 아이템을 생성할 수 있습니다.

🧱 ListView의 주요 생성자

1. ListView()

• 고정된 children 리스트를 직접 전달.
  • 단점: 많은 항목이 있으면 성능 저하 발생 (모든 위젯을 메모리에 생성)

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

(결과)

2. ListView.builder()

• 스크롤할 때마다 위젯을 생성하는 방식으로 성능에 유리.
• 항목이 많거나 동적으로 생성되는 경우에 필수.

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

(결과)

3. ListView.separated()

• 각 항목 사이에 구분선이나 위젯을 넣고 싶을 때 사용.

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  separatorBuilder: (context, index) => Divider(), // 구분선
)

(결과)

4. ListView.custom()

• 고급 커스터마이징이 필요한 경우 사용.
• SliverChildDelegate를 통해 직접 동작 방식 정의 가능.

📏 주요 속성

🧠 주의할 점 & 팁

✅ 성능 최적화

• 많은 항목이 있을 경우에는 반드시 ListView.builder() 사용.
• shrinkWrap: true는 필요한 경우에만, 일반 상황에선 성능 저하 가능 (예: 다른 스크롤 뷰 안에 ListView 포함할 때).
• physics: NeverScrollableScrollPhysics() 로 스크롤 비활성화 가능.

✅ 자동 스크롤 위치 유지

• controller를 사용해 스크롤 위치 제어 가능.
  • 예: ScrollController, jumpTo(), animateTo() 등 활용.

📌 Scaffold 클래스란?

Scaffold는 Flutter에서 화면을 구성할 때 기본적인 뼈대를 제공하는 위젯(Widget)입니다. Material Design 앱의 기본 구조를 쉽게 구성할 수 있도록 도와줍니다.

📦 Scaffold 주요 속성

• appBar: 상단에 위치하는 앱 바
• drawer: 왼쪽 슬라이드 메뉴
• bottomNavigationBar: 하단 내비게이션 바
• floatingActionButton: 플로팅 액션 버튼
• body: 화면의 메인 콘텐츠 영역
• resizeToAvoidBottomInset : 키보드가 뜰 때 body가 자동으로 리사이즈될지 여부
• backgroundColor : 배경색 지정

💡 예제 확인

샘플로 로컬 프로젝트를 생성 하려면:

flutter create --sample=material.Scaffold.1 mysample

( 코드 내용 )

import 'package:flutter/material.dart';

/// Flutter code sample for [Scaffold].

void main() => runApp(const ScaffoldExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: ScaffoldExample());
  }
}

class ScaffoldExample extends StatefulWidget {
  const ScaffoldExample({super.key});

  @override
  State<ScaffoldExample> createState() => _ScaffoldExampleState();
}

class _ScaffoldExampleState extends State<ScaffoldExample> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample Code')),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

이 예제는 appBar 와 body로 구성되어 FloatingActionButton이 있는 Scaffold를 보여줍니다. FloatingActionButton 은 클릭 시 카운터를 증가시키도록 콜백 처리 됩니다.

결론

Flutter를 공부하는 입장에서 Scaffold는 매 화면을 구성할 때 출발점이 되는 위젯이니, 완벽하게 이해하고 넘어가는 것이 좋습니다.

Scaffold 없이 CustomScrollView 같은 걸로 직접 구성도 가능하지만, 처음에는 Scaffold를 적극 활용하는 것이 개발 생산성도 좋고 UI 구현도 훨씬 빠릅니다.

Reference

• Scaffold-Class