[flutter] 플러터 커퍼티노 스테퍼를 이용한 메모 폰트 크기 조절 기능 구현하기
플러터의 Cupertino 스타일의 스테퍼를 사용하여 메모 앱에서 폰트 크기를 조절하는 기능을 구현해 보겠습니다.
1. Cupertino 스테퍼 추가하기
먼저, Cupertino 스테퍼를 사용하기 위해 cupertino_icons 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 아래와 같이 cupertino_icons 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2 # 패키지 추가
그리고 패키지를 적용하기 위해 터미널에서 flutter pub get 명령을 실행합니다.
2. 메모 폰트 크기 변수 추가하기
메모 폰트 크기를 저장할 변수를 추가해야 합니다. 이를 위해 StatefulWidget을 사용하여 상태를 관리합니다. 메모 폰트 크기 변수를 추가하는 코드는 다음과 같습니다.
class MemoApp extends StatefulWidget {
@override
_MemoAppState createState() => _MemoAppState();
}
class _MemoAppState extends State<MemoApp> {
double _fontSize = 16.0; // 메모 폰트 크기 변수 추가
...
}
3. Cupertino 스테퍼 위젯 추가하기
이제 Cupertino 스테퍼 위젯을 추가하여 메모 폰트 크기를 조절할 수 있도록 만들어보겠습니다. 메모 작성 화면에 스테퍼를 추가하고, 사용자가 스테퍼를 조절할 때마다 _fontSize 변수의 값을 업데이트 하도록 코드를 작성합니다.
class MemoApp extends StatefulWidget {
@override
_MemoAppState createState() => _MemoAppState();
}
class _MemoAppState extends State<MemoApp> {
double _fontSize = 16.0; // 메모 폰트 크기 변수 추가
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('메모 앱'),
),
child: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CupertinoStepper(
value: _fontSize, // 현재 폰트 크기 값 설정
min: 10.0, // 최소 폰트 크기
max: 40.0, // 최대 폰트 크기
stepValue: 2.0, // 스테퍼 조절 단위 값
onChanged: (double newValue) {
setState(() {
_fontSize = newValue; // 스테퍼 조절 시 폰트 크기 값 업데이트
});
},
),
Text(
'폰트 크기: $_fontSize',
style: TextStyle(fontSize: _fontSize),
),
],
),
),
),
);
}
}
위의 코드에서 CupertinoStepper 위젯은 현재 폰트 크기를 표시하며, 사용자가 스테퍼를 조절할 때마다 onChanged 콜백 함수가 호출되어 _fontSize 변수를 업데이트합니다.
4. 실행 결과 확인하기
위의 코드를 실행하면 Cupertino 스타일의 앱이 생성되고, 메모 폰트 크기를 조절할 수 있는 스테퍼가 화면에 표시됩니다. 사용자가 스테퍼를 조절할 때마다 폰트 크기가 실시간으로 업데이트되며, Text 위젯에도 현재 폰트 크기가 표시됩니다.
이제 메모 앱에서 사용자는 스테퍼를 통해 자유롭게 폰트 크기를 조절할 수 있게 됩니다.