Flutter / UI Elements / File
File Uploading
-
STEP
1. packages
open pubspec.yaml
dependencies: flutter: sdk: flutter http: ^1.1.0 image_picker: ^1.0.4 get: ^4.6.6 2. Import image_picker package
import 'package:image_picker/image_picker.dart'; 3. file option
children: [ InkWell( onTap: () { selectImage(); }, child: Container( width: double.infinity, decoration: BoxDecoration(color: Colors.white), child: Row( children: [ Container( padding: const EdgeInsets.all(14), color: Colors.grey, child: const Text( 'Photos', style: TextStyle(color: Colors.white), ), ), const SizedBox( width: 16, ), Obx(() { return Visibility( visible: imageFile.value != null, child: Text(imageFile.value?.name ?? ''), ); }) ], ), ), ), const SizedBox( height: 16, ), SizedBox( width: double.infinity, child: Obx(() { return _profileInProgress.value ? const Center( child: CircularProgressIndicator(), ) : ElevatedButton( onPressed: () { updateProfile(); }, child: const Text('Update'), ); }), ) ] 4. define selectImage() inside the class
void selectImage() { picker.pickImage(source: ImageSource.gallery).then((xFile) { if (xFile != null) { imageFile.value = xFile; } }); } 5. define updateProfile() inside the class
Complete codevoid updateProfile() async { } import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:task_manager_using_getx/data/models/auth_utility.dart'; import 'package:task_manager_using_getx/data/models/login_model.dart'; import 'package:image_picker/image_picker.dart'; import '../../data/models/network_response.dart'; import '../../data/services/network_caller.dart'; import '../../data/utills/urls.dart'; import '../../widgets/app_bar.dart'; import '../../widgets/screen_background.dart'; class UpdateProfileScreen extends StatelessWidget { final TextEditingController _firstNameTEController = TextEditingController(); final TextEditingController _emailTEController = TextEditingController(); final TextEditingController _lastNameTEController = TextEditingController(); final TextEditingController _mobileTEController = TextEditingController(); final TextEditingController _passwordTEController = TextEditingController(); final RxBool _isUpdateProcess = false.obs; final GlobalKey _formKey = GlobalKey (); final Rx imageFile = Rx (null); final ImagePicker picker = ImagePicker(); final RxBool _profileInProgress = false.obs; @override Widget build(BuildContext context) { UserData userData = AuthUtility.userInfo.data!; _emailTEController.text = userData.email ?? ''; _firstNameTEController.text = userData.firstName ?? ''; _lastNameTEController.text = userData.lastName ?? ''; _mobileTEController.text = userData.mobile ?? ''; return Scaffold( body: ScreenBackground( child: SingleChildScrollView( child: Form( key: _formKey, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ appBar(isUpdateScreen: true), const SizedBox( height: 24, ), Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'Update Profile', style: Theme.of(context).textTheme.titleLarge, ), ), const SizedBox( height: 16, ), Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ InkWell( onTap: () { selectImage(); }, child: Container( width: double.infinity, decoration: BoxDecoration(color: Colors.white), child: Row( children: [ Container( padding: const EdgeInsets.all(14), color: Colors.grey, child: const Text( 'Photos', style: TextStyle(color: Colors.white), ), ), const SizedBox( width: 16, ), Obx(() { return Visibility( visible: imageFile.value != null, child: Text(imageFile.value?.name ?? ''), ); }) ], ), ), ), const SizedBox( height: 12, ), TextFormField( controller: _emailTEController, keyboardType: TextInputType.emailAddress, readOnly: true, decoration: const InputDecoration( hintText: 'Email', ), validator: (String? value) { if (value?.isEmpty ?? true) { return 'Enter your email'; } return null; }, ), const SizedBox( height: 12, ), TextFormField( controller: _firstNameTEController, keyboardType: TextInputType.text, decoration: const InputDecoration( hintText: 'First name', ), validator: (String? value) { if (value?.isEmpty ?? true) { return 'Enter your first name'; } return null; }, ), const SizedBox( height: 12, ), TextFormField( controller: _lastNameTEController, keyboardType: TextInputType.text, decoration: const InputDecoration( hintText: 'Last name', ), validator: (String? value) { if (value?.isEmpty ?? true) { return 'Enter your last name'; } return null; }, ), const SizedBox( height: 12, ), TextFormField( controller: _mobileTEController, keyboardType: TextInputType.phone, decoration: const InputDecoration( hintText: 'Mobile', ), validator: (String? value) { if ((value?.isEmpty ?? true) || value!.length < 11) { return 'Enter your valid mobile no'; } return null; }, ), const SizedBox( height: 12, ), TextFormField( controller: _passwordTEController, obscureText: true, decoration: const InputDecoration( hintText: 'Password', ), validator: (String? value) { if ((value?.isEmpty ?? true) || value!.length <= 5) { return 'Enter a password more than 6 letters'; } return null; }, ), const SizedBox( height: 16, ), SizedBox( width: double.infinity, child: Obx(() { return _profileInProgress.value ? const Center( child: CircularProgressIndicator(), ) : ElevatedButton( onPressed: () { updateProfile(); }, child: const Text('Update'), ); }), ) ], ), ), ], ), ), ), ), ); } void selectImage() { picker.pickImage(source: ImageSource.gallery).then((xFile) { if (xFile != null) { imageFile.value = xFile; } }); } void updateProfile() async { _profileInProgress.value = true; final Map requestBody = { "firstName": _firstNameTEController.text.trim(), "lastName": _lastNameTEController.text.trim(), "mobile": _mobileTEController.text.trim(), "photo": "", }; if (_passwordTEController.text.isNotEmpty) { requestBody['password'] = _passwordTEController.text; } final NetworkResponse response = await NetworkCaller().postRequest(Urls.updateProfile, requestBody); _profileInProgress.value = false; if (response.isSuccessfull) { UserData userData = AuthUtility.userInfo.data!; userData.firstName = _firstNameTEController.text.trim(); userData.lastName = _lastNameTEController.text.trim(); userData.mobile = _mobileTEController.text.trim(); AuthUtility.updateUserInfo(userData); _passwordTEController.clear(); GetSnackBar(title: 'Profile updated!'); } else { GetSnackBar(message: 'Profile update failed! Try again.'); } } }