플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크입니다. Flutter의 장점 중 하나는 Android 및 iOS 외에도 웹 및 데스크톱 애플리케이션 개발을 지원한다는 것입니다. 이번 글에서는 플러터를 사용하여 웹 페이지 크기를 조절하는 기능을 구현해보겠습니다.
1. 커퍼티노 스테퍼란?
커퍼티노 스테퍼(Cupertino Stepper)는 iOS 스타일의 스테퍼 위젯입니다. 이 위젯을 사용하면 사용자가 값을 증감시킬 수 있는 스테퍼를 생성할 수 있습니다. 이번 예제에서는 웹 페이지의 가로 크기를 조절하는 데 사용될 것입니다.
2. 플러터 프로젝트 생성
먼저, 터미널에서 다음 명령어를 사용하여 새로운 플러터 프로젝트를 생성합니다.
flutter create web_resize_project
프로젝트가 생성되면, main.dart 파일을 열고 기본 구성을 변경합니다.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(WebResizeApp());
}
class WebResizeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: WebResizePage(),
);
}
}
class WebResizePage extends StatefulWidget {
@override
_WebResizePageState createState() => _WebResizePageState();
}
class _WebResizePageState extends State<WebResizePage> {
double pageWidth = 300;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Web Page Resize'),
),
body: Center(
child: Container(
width: pageWidth,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Resize me!',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
),
),
bottomNavigationBar: CupertinoScrollbar(
child: Padding(
padding: EdgeInsets.all(16),
child: CupertinoStepper(
initialValue: pageWidth,
min: 100,
max: 500,
stepValue: 50,
onChanged: (value) {
setState(() {
pageWidth = value;
});
},
),
),
),
);
}
}
위 코드에서는 WebResizePage StatefulWidget을 정의합니다. pageWidth 변수는 페이지의 초기 가로 크기를 저장하는 데 사용됩니다. 커퍼티노 스테퍼를 사용하여 pageWidth 값을 조절하고 있습니다.
3. 실행 및 테스트
프로젝트를 실행하려면 터미널에서 다음 명령어를 실행합니다.
cd web_resize_project
flutter run -d chrome
웹 페이지가 로드되면, 아래에 있는 스테퍼를 사용하여 페이지의 가로 크기를 조절해보세요. 스테퍼의 값이 변경될 때 마다 페이지의 크기가 업데이트됩니다. ‘Resize me!’라고 써진 텍스트가 페이지의 중앙에 위치합니다.
이제 플러터를 사용하여 웹 페이지 크기를 조절하는 기능을 구현하는 방법을 알아보았습니다. 플러터는 다양한 플랫폼에서 애플리케이션을 개발할 수 있는 강력한 도구입니다. 창의적인 아이디어를 실현하기 위해 플러터를 사용해보세요!
참고 자료: