[프로젝트] 전자액자 (1) PageView 위젯 사용

들어가기 앞서...

이번 게시글에는 간단하게 이미지들을 추가해서 앱내에서 슬라이드가 가능하게끔 진행을 할 것이다.

 

주의 깊게 봐야하는 점...

StatefulWidget 을 사용할 것이고, PageView 위젯을 사용할 것이다.

그리고 map 함수로 인해 공통된 코드를 줄일 것이다.

---

본문으로...

• 이미지들을 몇장 준비해주고 프로젝트에 asset 폴더 안에 img 폴더를 만들고 이미지들을 넣어주자!
• 플러터에 이미지 경로 추적가능하게 pubspec.yaml 파일에 경로 설정

pubspec.yaml

Pub get 누르는 거 잊지 말기~!

• main.dart 파일에 이제는 루틴대로 작성을 해주자

// main.dart 
import 'package:flutter/material.dart';
import 'package:hello_world_first/screen/home_screen.dart';

void main() {
	runApp(
        MaterialApp(
	        home: HomeScreen(),
        )
    )
}

• 그리고 lib > screen > home_screen.dart 생성 후 이젠 빠르게 커맨드로 stful 사용해 StatefulWidget 만들기

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

• PageView 위젯 사용하기 

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
      	children: [
	   Image.asset(
            'asset/img/img2.HEIC',
             fit: BoxFit.cover,
           ),
           Image.asset(
             'asset/img/img3.HEIC',
             fit: BoxFit.cover,
           ),
           Image.asset(
             'asset/img/img4.HEIC',
             fit: BoxFit.cover,
           ),
         ],
      ),
    );
  }
}

PageView 위젯 안에  children 리스트 가 있고!  Image.asset 으로 이미지들을 불러왔다.

이미지들이 크기가 제 각각 이라 이미지들을 화면을 다 덮으려면 fit 파라미터로 BoxFit.cover 를 사용해주면 된다.(우연치 않게 맞을 때도 있긴하다...)

왼) 이미지 원본, 오) fit: BoxFit.cover 적용

 

• 공통되는 코드 를 줄여보자!

이 코드를 보면 children 리스트 안을 보면 Image.asset() 에 경로가 같고 이름도 비슷한 걸 볼 수 있다.

그렇다면 코드를 수정해 줄 수 있다.

return Scaffold(
      body: PageView(
      	children: [
	   Image.asset(
            'asset/img/img2.HEIC',
             fit: BoxFit.cover,
           ),
           Image.asset(
             'asset/img/img3.HEIC',
             fit: BoxFit.cover,
           ),
           Image.asset(
             'asset/img/img4.HEIC',
             fit: BoxFit.cover,
           ),
         ],
      ),
    );

최종 코드 )

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [2,3,4].map(
            (e) => Image.asset('asset/img/img$e.HEIC', fit: BoxFit.cover)
        ).toList(),
      ),
    );
  }
}

자바스크립트에는 `${}` (템플릿 리터럴 표현식 삽입) 이렇게 작성하지만 플러터에서는 '$e' 이렇게 사용해도 적용이 된다.

 

---

끝으로...

1. 이미지를 넣고 불러오는 방법을 복습했다!
2.  커맨드를 사용해서 빠르게 프로젝트 세팅 할 수 있다!
3. 이미지를 스크롤 할 수 있도록  PageView() 위젯을 사용해봤다!
4. map 함수를 사용해 '$e' 표현식 삽입을 사용해 공통된 코드를 줄였다.

---