📚 Today I Learned 20회차(1) - Flutter BMI 계산기 앱 만들기 💡

9 분 소요

오늘은 Flutter로 실전 BMI 계산기 앱을 만들어보았어요! 테마 설정부터 페이지 라우팅, 위젯 재사용까지 다양한 개념을 실습하면서 익혔답니다. 특히 Material3 디자인 시스템과 다크모드 지원, Navigator를 이용한 데이터 전달 방법을 배웠어요.

🎯 학습 목표

Material3 테마 시스템 이해하고 라이트/다크 테마 구현하기
Navigator를 사용한 페이지 라우팅과 데이터 전달 방법 익히기
RichText 위젯으로 다양한 텍스트 스타일 조합하기
실전 프로젝트를 통해 위젯 재사용과 상태 관리 연습하기

📚 주요 내용

⭐ 1. Flutter 테마 설정 (ThemeData)

Flutter에서 앱 전체의 디자인을 일관되게 관리하려면 ThemeData를 사용해요. MaterialApp의 theme과 darkTheme 속성으로 라이트/다크 테마를 각각 정의할 수 있답니다.

📌 ThemeData 주요 속성

속성	설명	예시
useMaterial3	Material3 디자인 시스템 사용 여부	`true` / `false`
colorScheme	앱의 색상 체계 정의	`ColorScheme.fromSeed()`
textTheme	텍스트 스타일 정의	`TextTheme(...)`
brightness	밝기 모드 (라이트/다크)	`Brightness.light` / `Brightness.dark`

💡 Tip: ColorScheme.fromSeed()를 사용하면 하나의 seedColor를 기준으로 앱 전체의 색상 팔레트가 자동으로 생성돼요!

// 테마 설정 예시
ThemeData(
  // Material3 디자인 시스템 사용 (Material2와 차이: 버튼, 카드 등의 스타일이 더 현대적)
  useMaterial3: true,

  // ColorScheme.fromSeed: seedColor를 기준으로 자동으로 색상 팔레트 생성
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.purple,  // 기본 색상
    brightness: Brightness.dark,  // 다크모드 활성화
  ),

  // 앱 내에서 사용할 텍스트 스타일 정의
  // displayLarge: 큰 제목, titleLarge: 섹션 제목, bodyMedium: 본문 등
  textTheme: TextTheme(
    displayLarge: const TextStyle(
      fontSize: 72,
      fontWeight: FontWeight.bold,
    ),
    titleLarge: GoogleFonts.oswald(  // Google Fonts 사용 가능
      fontSize: 30,
      fontStyle: FontStyle.italic,
    ),
    bodyMedium: GoogleFonts.merriweather(),
    displaySmall: GoogleFonts.pacifico(),
  ),
)

⚡ 2. Navigator를 이용한 페이지 라우팅

Flutter에서 화면 전환은 Navigator를 사용해요. Navigator는 스택 구조로 페이지를 관리하며, push로 새 페이지를 추가하고 pop으로 이전 페이지로 돌아가요.

📘 참고: Flutter 공식 문서 - Navigation

📌 Navigator 주요 메서드

Navigator (Stack 구조)
│
├─ push()    → 새 페이지 추가
├─ pop()     → 현재 페이지 제거 (뒤로가기)
└─ pushReplacement() → 현재 페이지를 새 페이지로 교체

🔄 방법 1: RouteSettings를 이용한 데이터 전달

// 데이터를 넘기며 페이지 이동
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return ResultPage();
    },
    settings: RouteSettings(
      arguments: result  // 넘길 데이터
    )
  ),
);

// 새로운 페이지에서 데이터 받기
final args = ModalRoute.of(context)!.settings.arguments;

🎯 방법 2: 생성자를 이용한 데이터 전달 (추천!)

이 방법이 더 타입 안전하고 이해하기 쉬워요!

// 페이지 이동하면서 생성자로 데이터 전달
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return ResultPage(bmi);  // 생성자에 직접 전달
    },
  ),
);

// ResultPage 클래스에서 생성자로 받기
class ResultPage extends StatelessWidget {
  final double bmi;

  ResultPage(this.bmi);  // 생성자에서 받음
  // ...
}

⬅️ 되돌아가면서 데이터 전달하기

페이지 B에서 페이지 A로 돌아가면서 데이터를 전달할 수도 있어요!

// B 페이지에서: pop 호출 시 데이터를 함께 반환
ElevatedButton(
  onPressed: () {
    Navigator.pop(context, 'Nope.');  // 돌아가면서 데이터 전달
  },
  child: const Text('Nope.'),
)

// A 페이지에서: await로 결과 받기
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const SelectionScreen()),
);

// ⚠️ 중요: 안드로이드 뒤로가기 버튼이나 제스처로 뒤로가면 null 반환!
if (result != null) {
  // 받은 데이터 처리
}

🎨 3. RichText - 다양한 텍스트 스타일 조합

하나의 텍스트 위젯 안에서 부분적으로 다른 스타일을 적용하고 싶을 때 RichText를 사용해요. 예를 들어, “Result: NORMAL (BMI 18.5 - 25)”처럼 가운데 부분만 색상이나 굵기를 다르게 표현할 수 있어요.

// RichText 예시: 텍스트 일부만 다른 스타일 적용
RichText(
  text: TextSpan(
    // 기본 스타일 설정
    style: TextStyle(
      fontSize: 18,
      color: Theme.of(context).textTheme.bodyLarge?.color,
    ),
    children: [
      TextSpan(text: 'Result: '),  // 기본 스타일
      TextSpan(
        text: 'NORMAL',  // 이 부분만 다른 스타일
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Theme.of(context).highlightColor,  // 강조 색상
        ),
      ),
      TextSpan(text: ' (BMI 18.5 - 25)'),  // 다시 기본 스타일
    ],
  ),
)

💡 언제 사용하나요?

한 줄의 텍스트에서 일부만 색상, 굵기, 크기를 다르게 하고 싶을 때

여러 개의 Text 위젯을 나열하는 것보다 더 깔끔하게 처리 가능

💻 실전 프로젝트: BMI 계산기 앱

배운 내용을 종합해서 BMI 계산기 앱을 만들어봤어요!

🏗️ 프로젝트 구조

lib/
├── main.dart                      // 앱 진입점 & 테마 설정
├── theme.dart                     // lightTheme, darkTheme 정의
└── pages/
    ├── home/
    │   ├── home_pages.dart        // 홈 화면 (입력 페이지)
    │   └── widgets/
    │       ├── gender_box.dart    // 성별 선택 위젯
    │       └── slider_box.dart    // 키/몸무게 입력 슬라이더
    └── results/
        ├── results_page.dart      // 결과 화면
        └── widgets/
            ├── result_guage.dart  // BMI 게이지 (CircularProgressIndicator)
            └── result_text.dart   // 결과 텍스트 (RichText 사용)

📱 1. 메인 앱 & 테마 적용

// main.dart - 앱 진입점
import 'package:flutter/material.dart';
import 'package:flutter_bmi_app/pages/home/home_pages.dart';
import 'package:flutter_bmi_app/theme.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 시스템 설정에 따라 자동으로 테마 전환
      themeMode: ThemeMode.system,
      theme: lightTheme,        // 라이트 테마
      darkTheme: darkTheme,     // 다크 테마
      home: HomePages(),
    );
  }
}

🎨 2. 라이트/다크 테마 정의

// theme.dart - 라이트 테마 정의
import 'package:flutter/material.dart';

final lightTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.pinkAccent,        // 핑크 기반 색상 팔레트
    brightness: Brightness.light,
  ),
  dividerColor: Colors.black38,          // 구분선 색상
  highlightColor: Colors.pinkAccent,     // 강조 색상

  // 슬라이더 커스터마이징
  sliderTheme: SliderThemeData(
    thumbColor: Colors.pinkAccent,       // 슬라이더 손잡이
    activeTrackColor: Colors.black38,    // 활성 트랙
    inactiveTrackColor: Colors.black38,  // 비활성 트랙
    trackHeight: 1,
  ),

  // ElevatedButton 커스터마이징
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ButtonStyle(
      shape: WidgetStatePropertyAll(RoundedRectangleBorder()),  // 각진 버튼
      backgroundColor: WidgetStatePropertyAll(Colors.pinkAccent),
      foregroundColor: WidgetStatePropertyAll(Colors.white),
    ),
  ),

  // OutlinedButton 커스터마이징
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: ButtonStyle(
      shape: WidgetStatePropertyAll(RoundedRectangleBorder()),
      side: WidgetStatePropertyAll(BorderSide(color: Colors.black38)),
      foregroundColor: WidgetStatePropertyAll(Colors.black),
    ),
  ),
);

// theme.dart - 다크 테마 정의
final darkTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.pinkAccent,
    brightness: Brightness.dark,         // 다크모드
  ),
  dividerColor: Colors.white38,          // 다크모드용 구분선
  highlightColor: Colors.pinkAccent,

  sliderTheme: SliderThemeData(
    thumbColor: Colors.pinkAccent,
    activeTrackColor: Colors.white30,    // 다크모드용 트랙 색상
    inactiveTrackColor: Colors.white30,
    trackHeight: 1,
  ),

  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ButtonStyle(
      shape: WidgetStatePropertyAll(RoundedRectangleBorder()),
      backgroundColor: WidgetStatePropertyAll(Colors.pinkAccent),
      foregroundColor: WidgetStatePropertyAll(Colors.white),
    ),
  ),

  outlinedButtonTheme: OutlinedButtonThemeData(
    style: ButtonStyle(
      shape: WidgetStatePropertyAll(RoundedRectangleBorder()),
      side: WidgetStatePropertyAll(BorderSide(color: Colors.white30)),
      foregroundColor: WidgetStatePropertyAll(Colors.white),
    ),
  ),
);

🏠 3. 홈 페이지 - 데이터 입력 화면

// home_pages.dart - StatefulWidget으로 상태 관리
import 'package:flutter/material.dart';
import 'package:flutter_bmi_app/pages/home/widgets/gender_box.dart';
import 'package:flutter_bmi_app/pages/home/widgets/slider_box.dart';
import 'package:flutter_bmi_app/pages/results/results_page.dart';

class HomePages extends StatefulWidget {
  @override
  State<HomePages> createState() => _HomePagesState();
}

class _HomePagesState extends State<HomePages> {
  // 상태 변수들
  bool isMale = true;
  double height = 170;
  double weight = 70;

  // 성별 변경 콜백
  void onGenderChanged(bool male) {
    setState(() {
      isMale = male;
    });
  }

  // 키 변경 콜백
  void onHeightChanged(double newHeight) {
    setState(() {
      height = newHeight;
    });
  }

  // 몸무게 변경 콜백
  void onWeightChanged(double newWeight) {
    setState(() {
      weight = newWeight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BMI CALCUALATOR')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 50),
        child: Column(
          children: [
            // 성별 선택 위젯
            GenderBox(isMale, onGenderChanged),
            Spacer(),  // 자동 간격 채우기

            // 키 입력 슬라이더
            SliderBox(
              label: 'HEIGHT',
              value: height,
              unit: 'cm',
              onChanged: onHeightChanged,
            ),
            Spacer(),

            // 몸무게 입력 슬라이더
            SliderBox(
              label: 'WEIGHT',
              value: weight,
              unit: 'kg',
              onChanged: onWeightChanged,
            ),
            Spacer(),

            // BMI 계산 버튼
            SizedBox(
              width: double.infinity,
              height: 56,
              child: ElevatedButton(
                onPressed: () {
                  // BMI 계산: 체중(kg) / (신장(m) * 신장(m))
                  final meterHeight = height / 100;
                  final bmi = weight / (meterHeight * meterHeight);

                  // 결과 페이지로 이동 (생성자로 BMI 값 전달)
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return ResultsPage(bmi);
                      },
                    ),
                  );
                },
                child: Text('CALCULATOR'),
              ),
            ),
            SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}

👤 4. 성별 선택 위젯 (GenderBox)

// gender_box.dart - 재사용 가능한 성별 선택 위젯
import 'package:flutter/material.dart';

class GenderBox extends StatelessWidget {
  bool isMale;
  void Function(bool isMale) onChanged;

  GenderBox(this.isMale, this.onChanged);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        gender(context, Icons.male, 'MALE', isMale, true),
        SizedBox(width: 8),
        gender(context, Icons.female, 'FEMALE', !isMale, false),
      ],
    );
  }

  Widget gender(
    BuildContext context,
    IconData icon,
    String text,
    bool selected,
    bool isMaleBox,
  ) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          onChanged(isMaleBox);
        },
        child: Container(
          height: 150,
          decoration: BoxDecoration(
            border: Border.all(color: Theme.of(context).dividerColor),
          ),
          // Stack으로 아이콘과 텍스트를 겹쳐서 배치
          child: Stack(
            children: [
              // 배경 아이콘 (반투명)
              Positioned(
                top: 10,
                left: 10,
                child: Opacity(opacity: 0.3, child: Icon(icon, size: 80)),
              ),
              // 텍스트 (선택 여부에 따라 투명도 변경)
              Positioned(
                right: 20,
                bottom: 20,
                child: Opacity(
                  opacity: selected ? 1 : 0.3,  // 선택되면 불투명
                  child: Text(
                    text,
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📏 5. 슬라이더 위젯 (SliderBox)

// slider_box.dart - 재사용 가능한 슬라이더 위젯
import 'package:flutter/material.dart';

class SliderBox extends StatelessWidget {
  SliderBox({
    required this.label,
    required this.value,
    required this.unit,
    required this.onChanged,
  });

  String label;                             // 라벨 (HEIGHT, WEIGHT)
  double value;                             // 현재 값
  String unit;                              // 단위 (cm, kg)
  void Function(double newValue) onChanged; // 값 변경 콜백

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(label, style: TextStyle(fontSize: 20)),
            Spacer(),
            // 소수점 없이 정수로 표시
            Text(
              value.toStringAsFixed(0),
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
            Text(unit, style: TextStyle(fontSize: 20)),
          ],
        ),
        // 슬라이더 (1~300 범위)
        Slider(
          value: value,
          onChanged: onChanged,
          min: 1,
          max: 300,
        ),
      ],
    );
  }
}

📊 6. 결과 페이지 (ResultsPage)

// results_page.dart - BMI 결과를 보여주는 페이지
import 'package:flutter/material.dart';
import 'package:flutter_bmi_app/pages/results/widgets/result_guage.dart';
import 'package:flutter_bmi_app/pages/results/widgets/result_text.dart';

class ResultsPage extends StatelessWidget {
  double bmi;

  // 생성자로 BMI 값 받기
  ResultsPage(this.bmi);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BMI CALCUALATOR')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          children: [
            Spacer(),
            // 원형 게이지로 BMI 표시
            ResultGuage(bmi),
            SizedBox(height: 50),
            // RichText로 결과 텍스트 표시
            ResultText(bmi: bmi),
            Spacer(),
            // 재계산 버튼
            SizedBox(
              width: double.infinity,
              height: 56,
              child: OutlinedButton(
                onPressed: () {
                  Navigator.pop(context);  // 이전 화면으로 돌아가기
                },
                child: Text('RECALCULATE'),
              ),
            ),
            SizedBox(height: 50),
          ],
        ),
      ),
    );
  }
}

🎯 7. BMI 게이지 위젯 (ResultGuage)

// result_guage.dart - 원형 진행률 표시기로 BMI 시각화
import 'dart:math';
import 'package:flutter/material.dart';

class ResultGuage extends StatelessWidget {
  double bmi;

  ResultGuage(this.bmi);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        // 배경 원형 게이지 (회색, 100%)
        SizedBox.square(
          dimension: 250,
          child: CircularProgressIndicator(
            value: 1,  // 전체 원
            color: Theme.of(context).dividerColor,
          ),
        ),
        // BMI 표시 원형 게이지 (핑크, BMI/35)
        SizedBox.square(
          dimension: 250,
          child: CircularProgressIndicator(
            value: min(bmi / 35, 1),  // BMI 35를 최대값으로 (35 이상은 100%)
            color: Theme.of(context).highlightColor,
          ),
        ),
        // 중앙에 BMI 숫자 표시
        Text(
          bmi.toStringAsFixed(1),  // 소수점 첫째자리까지
          style: TextStyle(fontSize: 20)
        ),
      ],
    );
  }
}

📝 8. 결과 텍스트 위젯 (ResultText) - RichText 활용

// result_text.dart - RichText로 BMI 결과를 부분 강조하여 표시
import 'package:flutter/material.dart';

class ResultText extends StatelessWidget {
  final double bmi;
  ResultText({required this.bmi});

  // BMI 값에 따른 결과 텍스트 반환
  String getResultText() {
    if (bmi >= 35) {
      return 'EX OBESE';
    } else if (bmi >= 30) {
      return 'OBESE';
    } else if (bmi >= 25) {
      return 'OVERWEIGHT';
    } else if (bmi >= 18.5) {
      return 'NORMAL';
    } else {
      return 'UNDERWEIGHT';
    }
  }

  // BMI 범위 텍스트 반환
  String getResultRange() {
    if (bmi >= 35) {
      return '>= 35';
    } else if (bmi >= 30) {
      return '30 - 35';
    } else if (bmi >= 25) {
      return '25 - 30';
    } else if (bmi >= 18.5) {
      return '18.5 - 25';
    } else {
      return '< 18.5';
    }
  }

  @override
  Widget build(BuildContext context) {
    // RichText 사용: 텍스트 일부만 다른 스타일 적용
    return RichText(
      text: TextSpan(
        style: TextStyle(
          fontSize: 18,
          color: Theme.of(context).textTheme.bodyLarge?.color,
        ),
        children: [
          TextSpan(text: 'Result: '),
          // 결과 텍스트만 강조 (굵게 + 강조 색상)
          TextSpan(
            text: getResultText(),
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Theme.of(context).highlightColor,
            ),
          ),
          TextSpan(text: ' (BMI ${getResultRange()})'),
        ],
      ),
    );
  }
}

💡 핵심 개념 정리

🎨 테마 시스템

ThemeData
├─ ColorScheme.fromSeed()  → seedColor 기반 자동 색상 팔레트
├─ Brightness              → light / dark 모드
├─ SliderTheme             → 슬라이더 커스터마이징
├─ ElevatedButtonTheme     → 버튼 스타일 전역 설정
└─ OutlinedButtonTheme     → 아웃라인 버튼 스타일

🧭 Navigator 패턴

A 페이지 → Navigator.push() → B 페이지
         ← Navigator.pop()  ←

전달 방법:
1. RouteSettings.arguments (범용)
2. 생성자 파라미터 (타입 안전, 추천)

📦 위젯 재사용

SliderBox: 라벨, 값, 단위, 콜백을 파라미터로 받아 재사용
GenderBox: 선택 상태와 콜백을 받아 재사용
커스텀 위젯의 장점: 코드 중복 제거, 유지보수 용이

🔢 상태 관리

StatefulWidget: 변경 가능한 상태 (키, 몸무게, 성별)
setState(): 상태 변경 시 UI 자동 업데이트
콜백 함수: 자식 위젯에서 부모 위젯의 상태 변경

✅ 오늘 배운 것

🎨 테마 시스템: Material3와 ColorScheme.fromSeed()를 활용한 일관된 디자인 구현
🧭 페이지 라우팅: Navigator.push/pop으로 페이지 이동과 데이터 전달 방법 익힘
✨ RichText: 하나의 텍스트에서 부분 강조 스타일 적용 방법
📦 위젯 재사용: 재사용 가능한 커스텀 위젯 설계 방법 (GenderBox, SliderBox)
🔢 상태 관리: StatefulWidget과 setState()를 이용한 상태 관리
🏗️ 프로젝트 구조: pages와 widgets 폴더로 체계적인 코드 구조화

🚀 다음 학습 목표

상태 관리 심화: Provider 또는 Riverpod를 활용한 전역 상태 관리
애니메이션: Flutter의 Animation과 AnimatedContainer 학습
데이터 저장: SharedPreferences로 사용자 데이터 로컬 저장
API 연동: http 패키지를 활용한 REST API 통신
앱 완성도: 입력 유효성 검사, 에러 처리, 사용자 경험 개선

Twitter Facebook LinkedIn

joseph.c