플러터:개요: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
편집 요약 없음 |
편집 요약 없음 |
||
35번째 줄: | 35번째 줄: | ||
=== IDE 연결 === | === IDE 연결 === | ||
각자의 방법으로 연결한다. VSC의 경우, extention에서 flutter를 검색하면 설치할 수 있다. | 각자의 방법으로 연결한다. VSC의 경우, extention에서 flutter를 검색하면 설치할 수 있다. | ||
<syntaxhighlight lang="dart"> | |||
import 'package:flutter/material.dart'; // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원) | |||
void main() { | |||
runApp(const MyApp()); | |||
} | |||
class MyApp extends StatelessWidget { | |||
const MyApp({super.key}); | |||
@override | |||
Widget build(BuildContext context) { | |||
return const MaterialApp( | |||
debugShowCheckedModeBanner: false, | |||
home: Scaffold( | |||
body: Center( | |||
child: Text('Hello, World!'), | |||
), | |||
), | |||
); | |||
} | |||
} | |||
</syntaxhighlight> | |||
= 예제 = | |||
{| class="wikitable" | |||
|+ | |||
!사이트 | |||
!설명 | |||
!비고 | |||
|- | |||
|공식 문서 | |||
| | |||
|https://api.flutter.dev/ | |||
|- | |||
|공식 | |||
|공식 예제 사이트. | |||
|https://flutter.github.io/samples/# | |||
|- | |||
|Flutter Gems | |||
|공식 예제를 익히고 난 다음 참고하면 좋을 사이트. | |||
| | |||
|- | |||
| | |||
| | |||
| | |||
|} |
2024년 5월 29일 (수) 17:20 판
개요
구글이 공개한 앱개발 프레임워크.
간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.
설치
사전준비
- IDE
- 안드로이드 스튜디오와 VSCode, IntelliJ 등 IDE를 사용할 수 있는데, 사용할 IDE가 미리 설치되어 있어야 한다.
- JDK
- Git(선택)
- 오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)
git으로 설치
다운받을 디렉터리를 만들어준 후 명령 프롬프트에서 해당 디렉터리로 이동한다.
클론으로 복사한다. git clone -b stable https://github.com/flutter/flutter.git
그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다.
100%, done 이라는 텍스트가 몇 개 보이면 성공.
path
윈도우에서
제어판>시스템속성(system properties)>고급(advanced)>환경변수(environment variables)
위쪽 칸의 path를 더블클릭.
flutter를 설치한 경로를 추가해준다.(flutter디렉터리 하위의 bin까지)
IDE 연결
각자의 방법으로 연결한다. VSC의 경우, extention에서 flutter를 검색하면 설치할 수 있다.
import 'package:flutter/material.dart'; // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원)
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
예제
사이트 | 설명 | 비고 |
---|---|---|
공식 문서 | https://api.flutter.dev/ | |
공식 | 공식 예제 사이트. | https://flutter.github.io/samples/# |
Flutter Gems | 공식 예제를 익히고 난 다음 참고하면 좋을 사이트. | |