image_picker 를 이용해서 갤러리 (파일)에서 사진을 선택해서 업로드 하는 것을 구현해 보겠다.
1.pubspec.yaml 수정
먼저 pubspec.yaml에 dependencies: <- 여기 안에 image_picker: ^1.0.4 이걸 추가한다
dependencies:
flutter:
sdk: flutter
image_picker: ^1.0.4
나는 이렇게 됨.
2. 페이지 작성
나는 AddProductScreen이름으로 페이지를 생성했다.
import 'package:image_picker/image_picker.dart';
import 'dart:io';
image picker을 사용하기 위해 임포트
class _MyAppState extends State<AddProductScreen> {
File? _image; // 이미지 담을 변수
final ImagePicker picker = ImagePicker();
이미지를 담을 변수와 image picker 선언
Future getImage(ImageSource imageSource) async {
final XFile? pickedFile = await picker.pickImage(source: imageSource);
if (pickedFile != null) {
setState(() {
_image = File(pickedFile.path);
});
}
}
이미지를 가져오기 위한 코드
ElevatedButton _buildElevatedButton(String label, ImageSource imageSource) {
return ElevatedButton(
onPressed: () {
getImage(imageSource);
},
child: Text(label),
);
}
}
ElevatedButton을 사용하여 클릭시 파일(갤러리)에 있는 이미지 불러오기
Widget _buildPhotoArea() {
return _image != null || widget.image != null
? SizedBox(
width: 300,
height: 300,
child: Image.file(_image ?? widget.image!),
)
: Container(
width: 300,
height: 300,
color: Colors.grey,
);
}
photoArea를 사용하여 불러온 이미지 보여주기!!
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
void main() {
runApp(const MaterialApp(
home: AddProductScreen(),
));
}
class AddProductScreen extends StatefulWidget {
final File? image;
const AddProductScreen({Key? key, this.image}) : super(key: key);
@override
State<AddProductScreen> createState() => _MyAppState();
}
class _MyAppState extends State<AddProductScreen> {
File? _image; // 이미지 담을 변수
final ImagePicker picker = ImagePicker();
//이미지 가져오기
Future getImage(ImageSource imageSource) async {
final XFile? pickedFile = await picker.pickImage(source: imageSource);
if (pickedFile != null) {
setState(() {
_image = File(pickedFile.path);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("상품 추가")),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 30, width: double.infinity),
_buildPhotoArea(),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildElevatedButton("카메라", ImageSource.camera),
const SizedBox(width: 30),
_buildElevatedButton("갤러리", ImageSource.gallery),
],
),
],
),
//bottomNavigationBar: BottomBar(),
bottomNavigationBar: BottomNavigationBar(
// 바텀바 추가
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
label: 'My',
),
],
),
);
}
Widget _buildPhotoArea() {
return _image != null || widget.image != null
? SizedBox(
width: 300,
height: 300,
child: Image.file(_image ?? widget.image!),
)
: Container(
width: 300,
height: 300,
color: Colors.grey,
);
}
ElevatedButton _buildElevatedButton(String label, ImageSource imageSource) {
return ElevatedButton(
onPressed: () {
getImage(imageSource);
},
child: Text(label),
);
}
}
전체코드 ⬆️⬆️
나는 바텀바도 넣었다
화면
버튼(카메라나 갤러리) 클릭시 이미지를 가져올 파일을 여는 모습
photoArea에 선택한 이미지가 업로드됨
https://youngjumoney.tistory.com/12
[Flutter] image_picker로 카메라 및 갤러리에서 이미지 가져오기
Flutter에서 카메라로 촬영한 사진이나 갤러리의 이미지를 가져오는 것은 image_picker 패키지로 간단히 구현할 수 있다. image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image libr
youngjumoney.tistory.com
https://box-world.tistory.com/55
[ Flutter ] 갤러리 혹은 카메라에서 사진 가져오기
이번 포스팅에서는 Flutter에서 갤러리 혹은 카메라에서 사진을 'File'형식으로 가져오는 코드를 소개해드리겠습니다. 1) 갤러리에서 가져오기 PickedFile f = await ImagePicker().getImage(source: ImageSource.galler
box-world.tistory.com
이분들 것을 많이 참고했다 특히 첫번째 분 정말 감사합니다 (꾸벅)