[ 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.
    );
  }
}