2023. 2. 21. 11:47ㆍFramework
Flutter는 구글에서 개발한 모바일 앱 개발 프레임워크로, iOS 및 안드로이드용 모바일 앱을 개발할 수 있습니다. Flutter는 다양한 플랫폼에서 작동하는 모바일 앱을 만들 수 있도록 도와주며, 특히 아름다운 UI와 뛰어난 성능을 제공합니다.
Flutter는 DART 언어를 사용하여 개발되며, DART는 C++, Java, JavaScript 등 다양한 언어에서 영감을 받아 개발된 객체지향 언어입니다. DART는 C, C++, Java 등의 언어와 문법이 유사하며, AOT(Ahead of Time) 컴파일러를 사용하여 빠른 성능을 제공합니다.
Flutter는 위젯(widget) 시스템을 사용하여 UI를 구성합니다. 위젯은 UI의 구성 요소로, 버튼, 텍스트, 이미지 등 모든 것을 위젯으로 구성할 수 있습니다. Flutter는 레이아웃을 구성할 때 위젯을 조합하여 구성합니다. 또한, Flutter는 hot-reload 기능을 제공하여 개발자가 변경사항을 빠르게 확인하고 수정할 수 있도록 도와줍니다.
Flutter는 모바일 앱 개발 뿐만 아니라, 웹 및 데스크톱 앱 개발도 가능합니다. Flutter는 다양한 플랫폼에서 작동하며, 모바일 앱 개발에 이용된 많은 코드를 다른 플랫폼으로 이식할 수 있습니다.
Flutter는 커뮤니티가 활발하게 활동하며, 다양한 패키지와 라이브러리를 제공합니다. 또한, 구글의 지원을 받고 있으므로, 계속해서 개발이 이루어지고 있는 프레임워크입니다.
아래는 Flutter로 간단한 앱을 만드는 예제 코드입니다. 이 예제 코드는 버튼을 클릭하면 카운트를 증가시키는 앱을 구현한 것입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add
이 예제 코드에서는 MyHomePage 위젯에서 _counter 변수를 선언하고, _incrementCounter() 함수를 만들어 setState()를 호출하여 _counter 변수를 증가시키는 것으로 동작합니다. Scaffold 위젯은 앱의 전체 레이아웃을 구성하며, AppBar 위젯은 상단에 앱바를 추가합니다. Center 위젯은 화면 중앙에 위젯을 배치합니다. Column 위젯은 여러 개의 위젯을 수직으로 배열합니다. Text 위젯은 텍스트를 표시하며, FloatingActionButton 위젯은 화면 오른쪽 하단에 부동 버튼을 추가합니다.
Flutter는 다양한 위젯과 레이아웃을 지원하므로, 위 코드를 참고하여 다양한 앱을 만들어 볼 수 있습니다.