[Flutter] 간단한 UI 알아보기

완성화면

Lib Directory

This is the most important folder in the project, used to write most of the dartcode. By default, the lib folder contains the main.dart file, which is the application’s entry point. This configuration, however, can be changed.

pubspec.yaml

This is the file we use to add metadata and configuration specific to our application. With this file’s help, we can configure dependencies such as image assets, fonts, and app versions.

• yaml 파일은 들여쓰기가 중요하다.
• assets 연결
  • 프로젝트 루트에 assets 디렉토리 생성

assets:
    - assets/ # assets 폴더 내부의 자원을 인식할 수 있도록 함

 

main.dart

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StorePage(),
    );
  }
}

• debugShowCheckedModeBanner
  • false - 디버그 플래그 비활성화
  • home - StorePage()
    • 처음에 띄워지는 메인 스크린 정의
    • 여러개의 화면이 필요한 경우 route 속성으로 정의 (참고)

class StorePage extends StatelessWidget {
  const StorePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0), // 모든 영역에 25만큼 여백을 주겠음
              child: Row(
                children: const [
                  Text(
                    "iPhone",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    "iPad",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    "Mac",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    "Acc",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
                flex: 1,
                child: Image.asset(
                  "assets/img_sample.jpg",
                  fit: BoxFit.cover,
                )),
            SizedBox(
              height: 10,
            ),
            Image.asset(
              "assets/img_sample_max.jpeg",
            ) // 이름있는 생성자
          ],
        ),
      ),
    );
  }
}

 

• Column
  • 위젯들을 수직으로 담을 수 있음
  • android의 vertical 속성 느낌
• Row
  • 위젯들을 수평으로 담을 수 있음
  • android의 horizontal 속성 느낌
• SafeArea
  • StatusBar와 같이 그림이 그려지지 말아야할 영역은 제외하고 그린다.
• Spacer
  • 위젯과 위젯 사이의 간격을 조정
• Padding
  • 여백주기
• Image
  • Image.asset → 이름있는 생성자 (network, file, asset)
  • fit : 이미지 옵션 속성 (fill, contain, cover, fitWidth, fitHeigh, none, scaleDown)
• SizedBox
  • 빈 공간이 없어도 size를 차지한다 (like margin)

심화 학습 : 각 카테고리 클릭 시 화면 이동하기

각 카테고리를 클릭하면 다른 화면으로 이동하고 싶다..!!
그러나 Text위젯은 해당 영역을 클릭했을 때의 행위를 정의할 수 없는 것 같다.
(Text에는 클릭이벤트가 없어서 RichText 위젯을 사용하고 있는 것 같았다. - 살짝 검색해본 사람)
그래서 TextButton 위젯을 이용해보도록 하겠음
 

TextButton(
  style: TextButton.styleFrom(
      textStyle: const TextStyle(
    fontWeight: FontWeight.bold,
  )),
  onPressed: () {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => NextPage()));
  },

 

• onPressed
  • android의 OnClickListener 느낌
• Navigator.push
  • route 스택에 새로운 페이지를 추가
  • NextPage에서 뒤로가기 물리 버튼을 누르면 다시 해당 화면으로 돌아온다. (Navigator.pop)

그나저나 위의 Text처럼 각 카테고리 마다 해당 코드를 복붙해야하는 걸까..?(이마짚
다음 시간에는 해당 위젯들을 컴포넌트화 해서 재사용할 수 있는 방법을 공부해봐야겠다.

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.
말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.
https://www.section.io/engineering-education/flutter-folder-organization/

Flutter Folder Organization

https://easyupclass.e-itwill.com/course/course_view.jsp?id=28&rtype=0&ch=course

이지업클래스 | 모두를 위한 온라인 IT CLASS

https://api.flutter.dev/flutter/material/Scaffold-class.html

Scaffold class - material library - Dart API

https://api.flutter-io.cn/flutter/material/TextButton-class.html

TextButton class - material library - Dart API

https://flutter-ko.dev/docs/cookbook/navigation/navigation-basics

Navigate to a new screen and back