반응형
1. 페이지 생성 및 나가기
웹 페이지와 flutter의 페이지 이동을 비교했을 때
- 웹 페이지 : 웹페이지가 이동하면 덮어씌워진다.
- flutter : 페이지가 stack형식처럼 쌓인다.
페이지 만들기
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Text('안녕')),
);
페이지 나가기
Navigator.pop(context);
페이지를 만들었으면 나가기가 있어야 한다. 버튼을 눌러 나가게 하는 것이 좋다.
route 생성하기
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => Text('첫페이지'),
'/detail': (context) => Text('둘째페이지'),
},
);
- initialRoute : 앱을 켰을 때 제일 먼저 보여줄 페이지를 말한다.
- routes : 원하는 라우터에 보여줄 위젯들을 넣어주면 된다.
Navigator.pushNamed(context, '/detail');
위의 코드는 어떠한 버튼을 눌렀을 때 해당 페이지로 이동할 수 있게 만든다.
2. 이미지 가져오기
이미지를 가져올려면 항상 그랬듯이 의존성을 주입해줘야 한다.
1. image_picker 셋팅하기
1) pubspec.yaml 파일에 의존성 주입하기
dependencies:
image_picker: ^0.8.4+4
위같이 설정해준다.
2) ios/Runner/Info.plist 파일 설정해주기
<key>NSPhotoLibraryUsageDescription</key>
<string>사진첩을 열겠습니다. </string>
<key>NSCameraUsageDescription</key>
<string>카메라를 쓰겠습니다. </string>
<key>NSMicrophoneUsageDescription</key>
<string>마이크의 권한을 쓰겠습니다. </string>
<key>CFBundleDevelopmentRegion</key>
반응형
위의 경로로 들어가서 dict태그 아래에 위의 코드를 써서 설정해주면 된다.
string태그에 써준 글씨들은 사용자에게 허락팝업 띄울 때 보이는 글자들이다.
3) main.dart에 설정하기
import 'package:image_picker/image_picker.dart';
import 'dart:io';
main.dart파일에 들어가서 상위에 위와 같은 코드를 붙여준다.
2. 이미지 사용하기
위와 같이 해준 이유는 이미지를 사용하기 위해 셋팅을 해준 것이다.
- picker.pickImage(source: ImageSource.camera) : 카메라를 띄워준다.
- picker.pickVideo(source: ImageSource.gallery) : 비디오를 띄워준다.
- picker.pickMultiImage(source: ImageSource.gallery) : 여러 이미지를 선택할 수 있다.
여기서 이미지만 사용가능한게 아니라, 고른 이미지 사이즈, 화질 조정도 가능하다. photofilters등은 이미지에 필터도 씌울 수 있다.
반응형
