Um seletor de imagens é um dos componentes mais usados em qualquer aplicativo. Muitos aplicativos populares, como Facebook, Twitter, Instagram, WhatsApp, etc., têm um seletor de imagens que permite aos usuários selecionar arquivos de seus dispositivos para usar como imagem de perfil ou compartilhar com seus amigos.
O O caso de uso mais comum para um seletor de imagens em um aplicativo móvel é definir um avatar para o perfil do usuário. Neste tutorial, mostraremos como criar um seletor de imagens no Flutter. Vamos construir um exemplo de aplicativo Flutter que permite ao usuário selecionar uma foto da galeria ou tirar uma foto da câmera do dispositivo.
Aqui está o que vamos cobrir:
O que é Flutter image_picker? Criação de um aplicativo seletor de imagens Flutter Adicionando o plugin image_picker Criando widgets Testando nosso aplicativo de seleção de imagens Flutter
O que é o Flutter image_picker?
Codificar um widget de seletor de imagens no Flutter a partir do zero seria entediante. O Flutter vem com um plugin de seleção de imagens para escolher imagens da galeria do dispositivo ou tirar novas fotos da câmera.
O plugin image_picker expõe alguns métodos úteis da classe ImagePicker que exporta:
import’package: image_picker/image_picker.dart’; ImagePicker picker=ImagePicker ();
A instância do selecionador tem métodos públicos que chamaremos para abrir a caixa de diálogo de seleção de imagem. Vejamos esses métodos.
pickImage
XFile? image=await picker.pickImage (fonte: ImageSource.gallery);
O método pickImage abre a caixa de diálogo de escolha e exibe a galeria do telefone para selecionar a imagem. O argumento de origem indica de onde a imagem deve ser escolhida.
Aqui, a origem é definida como ImageSource.gallery, então a imagem é selecionada da galeria do usuário.
XFile? image=await picker.pickImage (fonte: ImageSource.camera);
No exemplo acima, a imagem é tirada da câmera do dispositivo. Este método abre a câmera e seleciona a imagem capturada pelo usuário. A fonte: ImageSource.camera arg é o que abre a câmera do dispositivo.
pickVideo
XFile? image=await picker.pickVideo (fonte: ImageSource.gallery);
Este método abre uma caixa de diálogo de escolha para escolher um vídeo da galeria do telefone. Você usaria o método pickVideo quando quiser que um vídeo seja escolhido na galeria ou na câmera de vídeo do telefone. A fonte do argumento: ImageSource.gallery faz com que o vídeo seja escolhido na galeria do telefone .
XFile? photo=await picker.pickVideo (fonte: ImageSource.camera);
Este método permite que o usuário escolha um vídeo da câmera. O arg source: ImageSource.camera abre a câmera de vídeo do telefone para que o usuário possa gravar o vídeo. O vídeo gravado é então usado como o vídeo escolhido.
pickMultiImage
List
pickMultiImage permite que o usuário escolha várias imagens. O arg source: ImageSource.gallery nos permite escolher as imagens da galeria do telefone.
Listar
Construindo um aplicativo seletor de imagens Flutter
Agora que revisamos os métodos no plug-in image_picker, vamos construir um exemplo de aplicativo seletor de imagens Flutter para ver como eles funcionam na prática.
Antes de começar, certifique-se de ter as seguintes ferramentas e binários já instalados em sua máquina.
Flutter SDK : usaremos isso para compilar, criar e executar nosso projeto Flutter. Ele tem uma ferramenta CLI, flutter, que nos permite fazer essas coisas a partir do terminal VS Código : isso é opcional, mas ótimo para a codificação de projetos Flutter. VS Code tem plug-ins incríveis para aprimorar sua experiência de codificação com Flutter Android Studio : este binário é um IDE para construir e compilar projetos nativos do Android. Também podemos criar, compilar e executar projetos Flutter usando o Android Studio. Mas principalmente precisamos do Android Studio para executar emuladores e compilar nosso projeto Flutter a partir do VS Code
Scaffolding a Flutter project
Agora que terminamos de instalar as ferramentas e binários necessários, é hora de construir nosso Flutter aplicativo de exemplo de seletor de imagens.
Primeiro, vamos criar um projeto Flutter:
flutter create imagepickerprj
Isso cria um projeto Flutter em uma pasta chamada imagepickerprj. Uma série de comandos será transmitida em cascata pelo nosso terminal. No final do terminal, você verá instruções para executar o projeto recém-gerado:
Para executar seu aplicativo, digite: $ cd imagepickerprj $ flutter run Para habilitar a segurança nula, digite: $ cd imagepickerprj $ dart migrate–apply-changes Seu código de aplicativo está em imagepickerprj/lib/main.dart.
Não vamos executá-lo agora, mas vamos movê-lo para dentro da pasta:
cd imagepickerprj
Adicionando o plugin image_picker
A próxima etapa é adicionar o plugin image_picker ao nosso Projeto Flutter.
Abra o arquivo pubspec.yaml e adicione o image_picker à seção de dependências:
dependencies: flutter: sdk: flutter image_picker: ^ 0.8.2
Se você estiver usando VS Code, ele puxará automaticamente o image_picker assim que você salvar o arquivo pubspec.yaml. Se você não estiver usando o VS Code, execute o seguinte comando para obter a dependência adicionada mais recente:
flutter pub get
Criando widgets
Em nosso projeto imagepickerprj, nosso arquivo principal reside no lib/pasta. Este é o arquivo main.dart, que é o ponto de entrada de qualquer projeto/aplicativo Flutter. É aí que começaremos a adicionar a maior parte do nosso código.
O Flutter já tem alguns códigos definidos para nós, mas não precisaremos deles, exceto no widget MyApp. Vamos começar por aí:
void main () {runApp (MyApp ()); } class MyApp extends StatelessWidget {//Este widget é a raiz do seu aplicativo. @override Widget build (BuildContext context) {return MaterialApp (title:’Flutter Demo’, theme: ThemeData (primarySwatch: Colors.blue,), home: HomePage (),); }}
Nosso aplicativo seletor de imagens Flutter terá duas telas:
HomePage listará dois botões: Selecionar imagem da galeria e Selecionar imagem da câmera. O Pick Image from Gallery abrirá uma tela ImageFromGalleryEx onde podemos escolher uma imagem de nossa galeria, enquanto Pick Image from Camera abrirá uma tela ImageFromGalleryEx onde podemos tirar uma foto de nossa câmera e usar a imagem como a imagem escolhida que ImageFromGalleryEx tratará escolhendo imagens da galeria e da câmera. Ele saberá o que tratar com base no tipo de fonte enviado a ele. Ele também exibirá a imagem escolhida.
Agora vamos codificá-los.
HomePage
enum ImageSourceType {gallery, camera} class HomePage extends StatelessWidget {void _handleURLButtonPress (BuildContext context, var type) {Navigator.push (context, MaterialPageRoute (builder: (context)=> ImageFromGalleryEx (type))); } @override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text (“Image Picker Example”),), body: Center (child: Column (children: [MaterialButton (color: Colors.blue, child: Text (“Pick Image from Gallery”, style: TextStyle (color: Colors.white70, fontWeight: FontWeight.bold),), onPressed: () {_handleURLButtonPress (context, ImageSourceType.gallery);},), MaterialButton (color: Colors.blue, child: Text (“Pick Image from Camera”, style: TextStyle (color: Colors.white70, fontWeight: FontWeight.bold),), onPressed: () {_handleURLButtonPress (context, ImageSour ceType.camera); },),],),)); }}
Temos um enum, ImageSourceType, que contém os tipos de origem da imagem, galeria e câmera.
No widget HomePage, temos um método, _handleURLButtonPress. Este método usa o tipo arg, que contém quaisquer valores de ImageSourceType. Ele abre o widget ImageFromGalleryEx, passando o tipo de origem da imagem para a classe do widget.
No método de construção, vemos que ele renderiza dois botões, como afirmamos anteriormente: Selecionar imagem da galeria e Selecionar imagem da câmera. Cada botão tem um evento onPressed definido nele. Os eventos chamam o método _handleURLButtonPress quando os botões são pressionados.
O botão Selecionar imagem da galeria passa o ImageSourceType.gallery para o widget ImageFromGalleryEx, informando que escolheremos uma imagem da galeria. O botão Selecionar imagem da câmera passa o ImageSourceType.camera para o widget ImageFromGalleryEx, informando-o para abrir a câmera do telefone e tirar a foto capturada como a imagem selecionada.
Agora, vamos codificar o widget ImageFromGalleryEx.
ImageFromGalleryEx
classe ImageFromGalleryEx extends StatefulWidget {tipo final; ImageFromGalleryEx (this.type); @override ImageFromGalleryExState createState ()=> ImageFromGalleryExState (this.type); } class ImageFromGalleryExState extends State
Aqui, temos ImageFromGalleryEx, um widget com estado, e ImageFromGalleryExState, que contém o estado do widget ImageFromGalleryEx.
Dentro do widget ImageFromGalleryExState, temos as seguintes variáveis:
_image contém a imagem escolhida, seja da galeria ou da câmera. imagePicker contém a instância do tipo de classe ImagePicker contém o tipo de fonte de imagem a ser usado pelo widget. Ele é passado para o widget do widget HomePage
Também temos um método initState, que é inserido primeiro na árvore de widgets. Usamos esse método para inicializar e criar a instância da classe ImagePicker e, em seguida, atribuí-la à variável imagePicker.
Dentro do método de construção está o widget Container, que é filho do widget Center. Renderizamos o Image.file com base na condição da variável _image. Se _image não for nulo ou indefinido, sabemos que ele tem uma imagem, então renderizamos o widget Image.file passando a variável _image para ele.
Este Image.file é um widget usado para renderizar imagens do armazenamento local de um dispositivo.
Se não houver nada na variável _image, renderizamos o widget Container. Este contêiner exibe um ícone de câmera.
O GestureDetector é o pai de todos esses widgets. Tem um evento onTap registrado. Este evento é disparado quando os widgets dentro deste GestureDetector são tocados. O manipulador onTap chama o método pickImage da instância imagePicker. Ele deduz a fonte da imagem da variável type e a passa para o método pickImage. Em seguida, ele passa a qualidade da imagem (imageQuality: 50) e, por último, o dispositivo de câmera preferencial preferidoCameraDevice: CameraDevice.front. Isso faz com que ele escolha a câmera frontal de nosso telefone.
Agora, pickImage retorna uma instância de XFile. Fazemos referência ao image.path da imagem de instância de XFile retornada e passamos para File para criar uma instância de File a partir dele. Esta instância XFile é o que definimos para o estado _image via:
setState (() {_image=File (image.path);});
Isso fará com que ImageFromGalleryExState seja renderizado novamente e o Image.file exibirá a imagem na variável _image.
Agora que terminamos com o código, vamos testar nosso aplicativo.
Testando nosso aplicativo selecionador de imagem Flutter
Abra seu emulador Android e, em seu terminal, execute o seguinte comando:
flutter run
Isso irá compilar e construir o projeto e em seguida, execute o aplicativo dentro do seu emulador Android.
Se você estiver usando o VS Code, pode executar o comando acima ou simplesmente clicar com o botão direito do mouse em lib/main.dart em seu editor e clicar em executar Sem depurar ou começar a depurar.
O aplicativo será aberto em seu emulador Android.
HomePage:
Escolha uma imagem da galeria:
Escolha a imagem da câmera:
Conclusão
Aprendemos muito neste tutorial. Começamos apresentando casos de uso comuns para o componente seletor de imagens Flutter. Em seguida, introduzimos o plugin image_picker para Flutter. Vimos como inicializar a classe ImagePicker do plug-in image_picker e revisamos os métodos na classe ImagePicker.
Finalmente, construímos um projeto Flutter para demonstrar como usar o plug-in image_picker em um cenário do mundo real..
Encontre o código-fonte deste projeto em GitHub .
