Notice
Recent Posts
Recent Comments
Link
Seung's Learning Record
[ Flutter ] 코드 살펴보기 본문
1. 프로젝트 구조
프로젝트의 구조를 살펴보면 여러 폴더들이 존재하는데 우리는 lib 폴더와 pubspec.yaml를 가장 많이 고칠 것이다.
2. pubspec.yaml
pubspec.yaml 은 gradle이나 maven처럼 패키지 모듈을 설치하고, 버전에 의존성 등을 관리해주는 설정 파일이다. 우리가 배포하는 앱의 패키지, 의존하는 외부 라이브러리, 개발용 라이브러리, 플러터 안에서 사용되는 assetsassets을 사용하고 관리해준다.
해당 파일에 dependencies에 외부 모듈 사용을 작성하고 난 후, 프로젝트 안에서 사용하기 위해서는 반드시 pub get을 하여 수정사항을 반영해 주어야 한다.
3. main.dart
초기 프로젝트에서 앱의 전체적인 동작 내용이 코딩된 부분이다. main.dart 는 크게 main메소드, stful 위젯, stless 위젯 이렇게 세 가지 부분으로 나눌 수 있다.
- main 메소드
void main() {
runApp(const MyApp());
}
앱이 실행되면 가장 먼저 main() 메소드가 실행되며, 아래 작성된MyApp() 클래스를 기동 한다.
- MyApp
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key); // Navigator 화면의 전환을 위해 약속된 Key 부분
@override
Widget build(BuildContext context) { // UI코드가 작성되는 부분
return MaterialApp( //앱 테마와 home 화면에 연결
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
초기 프로젝트의 UI에 최상단에는 일반적으로 MaterialAppWidget이 사용된다.
여기서는 home 옵션에MyHomePage가 연결되어 있으며, 이는 앱의 초기화면이다.
- MyHomePage
앱의 초기화면을 편집하는 부분이다.
자세한 코드는 지금 알 필요 없다고 판단해서 넘긴다.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
'Dev Tool > Flutter' 카테고리의 다른 글
[ Flutter ] Splash Screen 만들기 (0) | 2022.10.03 |
---|---|
[ Flutter ] StatelessWidget과 StatefulWidget의 차이 (1) | 2022.10.01 |
[ Flutter ] main() 코드 살펴보기 (0) | 2022.09.28 |
[ Flutter ] GUI 애플리케이션 프레임워크, 플러터 (0) | 2022.09.28 |