Flutter 프로젝트 디렉토리 구조, 위젯 알아보기

 

 

이번에는 플러터를 다루기전에 알아두면 좋은 여러가지 기초 지식에 대해서 다뤄보고 그에 대한 내용을 정리하고자 한다. 

 

---

 

프로젝트 디렉토리 구성

일단 플러터 프로젝트를 만들게 되면 수많은 디렉토리가 추가가 된다. 

 

 

이 중에서 우리가 자주 다루는 부분은 lib폴더 안에 있는 main.dart라는 파일이고 나머지 andriod, ios는 우리가 만든 main.dart 라는 파일을 안드로이도나, IOS로 변환 시켜 줄때 어떻게 설정해야 하는지에 대한 부분으로, 그 외의 부분은 따로 설정해주지 않아도 된다. 

 

만약에 웹뷰를 포함한 패키지가 필요할 경우에는 pubspec.yaml에 패키지의 정보가 담기게 되니 이를 참고하자. 

 

 

 

 

 

위젯

위젯이란 화면에 보이게 하는 모든 요소를 의미한다. 

 

우리는 이제 main.dart에서 코드를 작성하고 그 코드를 통해 화면에 요소를 뛰우고 이를 활용하는 작업을 거치게 된다. 아래 시뮬레이터에서 볼 수 있든 숫자, 글자, 앱바 등 보이는 모든것이 위젯이라고 할 수 있다. 

 

 

 

우리는 이 위젯을 코드를 통해 구현을 하는데, 이는 마치 코드가 코드를 감싸는 구조를 통해 구현할 수 있다. 예를 들어서 하얀 배경위로 저런 런 앱바와, 글자 숫자를 구현하려고 한다면 다음과 같이 코드를 작성 할 수 있다. 

 

- main.dart

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

여기서 다른 부분은 크게 신경쓰진 말고 중간쯤에 있는 return Scaffold() 부터 살펴본다.

• Scaffold()을 통해 화면의 레이아웃을 잡는다.
  일반적으로 appBar(상단에 넣을 위젯) body(중단에 넣을 위젯) bottomNavigationBar(하단에 넣을 위젯)을 통해 구현하며 상단, 하단 바는 필수가 아니지면 중간바인 body는 필수이다. 
• body안에 넣고자하는 위젯을 찾아서 넣는다. 위젯마다 사용하는 방식이 다르기 때문에 자세한 내용은 공식문서를 참조하면서 넣어보는 것을 추천한다.