Today I Learned 6회차(3) - [플루터] 앱을 만들려면 알아야하는 그 밖의 지식

다트 강의와 별개로 “[Must Have] 코드팩토리의 플러터 프로그래밍(3판)” 책을 읽으면서 플루터 개발에 관련된 내용을 추가로 정리를 진행합니다.

앱을 만들려면 알아야하는 그 밖의 지식

폴더 구조

• screen: 스크린 전체에 해당하는 위젯들을 모아두는 폴더
• component: 스크린을 구성하는 데 공통으로 사용될 만한 요소의 위젯들을 모아두는 폴더입니다.
• model: 모델들을 따로 모아두는 폴더입니다.
• const: 상수들을 모아두는 폴더입니다.

플러그인 추가 방법

• pubspec.yaml의 dependencies에 원하는 플러그인을 추가

연습용 앱 만들기

이미지 출력하기: Image 위젯

• 기본 Image 생성자
• Image.asset 생성자: 앱에 저장된 asset 파일로 이미지를 그립니다.
• Image.network 생성자: URL을 통해 이미지를 그립니다.
• Image.file 생성자: 파일을 통해 이미지를 그립니다.
• Image.memory 생성자: 메모리에서 직접 이미지를 그립니다.

로딩 애니메이션 구현

• LinearProgressIndicator: 일자 형태
• CircularProgressIndicator: 동그라미 형태

중요!!

Column의 경우 세로로 최대한 크기를 차지하는 특성이 있습니다. 하지만 가로로는 최소한 크기만 차지합니다. 따라서 Column의 경우 자식 위젯 가로의 크기가 가장 큰 위젯의 크기에 따라 크기가 결정이됩니다. 반면 Row 위젯은 Column 위젯과 정확히 반대로 작동합니다. 가로로는 최대 크기를 차지하고 세로로는 최소 크기를 차지합니다. 따라서 Row 위젯으로 Column 위젯을 감싸면 Column 위젯과 마찬가지로 Row 위젯도 기본적으로 왼쪽부터 위젯들을 정렬합니다.

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          // width: double.infinity,
          // height: double.infinity,
          decoration: BoxDecoration(color: Color(0xFFF99231)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset('assets/logo.png', width: 200),
                  CircularProgressIndicator(color: Colors.white),
                  // LinearProgressIndicator(),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}