skip to Main Content

This is the code for selecting the image in flutter but when i select the image from the gallery it does not show on the icon and when i select camera for taking the image it does not open the camera instead it opens the gallery why?

try to run my project over Chrome(web)

file

import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:harsh/uihelper.dart';
import 'package:image_picker/image_picker.dart';

class SignUpPagee extends StatefulWidget {
  const SignUpPagee({super.key});

  @override
  State<SignUpPagee> createState() => _SignUpPageeState();
}

class _SignUpPageeState extends State<SignUpPagee> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordConntroller= TextEditingController();
  File? pickedImage;
  showAlertBox(){
    return showDialog(context: context, builder: (BuildContext context){
      return AlertDialog(
        title: Text("pick image from "),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              onTap: (){
                pickImage(ImageSource.camera);
                Navigator.pop(context);
              },
              leading: Icon(Icons.camera_alt),
              title: Text("Camera"),
            ),
            ListTile(
              onTap: (){
                pickImage(ImageSource.gallery);
                Navigator.pop(context);
              },
             leading: Icon(Icons.image),
              title: Text("Gallery"),
            )
          ],
        ),
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SignUpPage2"),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          InkWell(
            onTap: (){
              showAlertBox();
            },
            child:pickedImage!=null? CircleAvatar(
              radius: 80,
             backgroundImage: FileImage(pickedImage!),
            ):
                CircleAvatar(
                  radius: 88,
                  child: Icon(Icons.person,size: 80,),
                )
          ),
          UiHelper.CustomTextField(emailController, "Email", Icons.mail, false),
          UiHelper.CustomTextField(passwordConntroller, "Password", Icons.password, false),
          SizedBox(height: 20,),
          UiHelper.CustomButton(() { }, "Sign Up "),

        ],
      ),
    );
  }
  pickImage(ImageSource imageSource)async{
    try{
      final photo= await ImagePicker().pickImage(source: imageSource);
      if(photo==null)return;
        final tempimage= File(photo.path);
        setState(() {
          pickedImage= tempimage;

        });


    }
    catch(ex){
      log(ex.toString() as num);
    }
  }
  
}

pubspec.yml file

name: harsh
description: "A new Flutter project."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=3.2.4 <4.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  firebase_core: ^2.27.0
  firebase_auth: ^4.17.8
  cloud_firestore: ^4.15.8
  image_picker: ^1.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

i am trying to take the image selected by me from the gallery over the circle avatar but when i select the image from the gallery it does not comes on the icon what i use in making the Ui of my project.

also when i select camera for taking the image it does not opens the instead it opens gallery everytime.

2

Answers


  1. The image picker package you are using doesn’t work for web. There is another package image_picker_for_web. Just like the image_picker library, it is a published by the flutter team

    Login or Signup to reply.
  2.  - you can not access file directly because flutter web do not directly provide file access for security you can picked image and display in web easy way follow below code.
     - in this code firstly picked image path after picked image path you can pass this path in Image.network()
            
    
     - image_picker: ^1.1.2
            
    
     - GestureDetector(
          onTap: () => pickedImage(),
          child: Container(
            width: 500,
            height: 500,
            decoration: BoxDecoration(
                 border: Border.all(color: Colors.black),
             ),
             child: imagePath.isNotEmpty
                   ? Image.network(imagePath, fit: BoxFit.fill,)
                   : const Center(child: Text("Tap to Select Image"),
             )
          ),
       ),
            
    
     - void pickedImage() async{
          final imagePicker = await ImagePicker().pickImage(source: ImageSource.gallery);
           if(imagePicker != null){
               setState((){
                  imagePath = imagePicker.path;
              });
          }}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search