Skip to main content

Image picker post image Flutter 2024

Image picker post image Flutter 2024


import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

import 'dart:io';

import 'package:http/http.dart' as http;


class ImageUploadScreen extends StatefulWidget {

  @override

  _ImageUploadScreenState createState() => _ImageUploadScreenState();

}


class _ImageUploadScreenState extends State<ImageUploadScreen> {

  File _image;


  final picker = ImagePicker();


  Future getImage() async {

    final pickedFile = await picker.getImage(source: ImageSource.gallery);


    setState(() {

      if (pickedFile != null) {

        _image = File(pickedFile.path);

      } else {

        print('No image selected.');

      }

    });

  }


  Future uploadImage() async {

    if (_image == null) return;


    // Change this URL to your server endpoint

    var url = 'YOUR_SERVER_ENDPOINT';


    // Encode image to base64

    List<int> imageBytes = _image.readAsBytesSync();

    String base64Image = base64Encode(imageBytes);


    // Send HTTP request

    var response = await http.post(url, body: {

      "image": base64Image,

    });


    // Handle response

    print('Response status: ${response.statusCode}');

    print('Response body: ${response.body}');

  }


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Image Upload'),

      ),

      body: Center(

        child: _image == null

            ? Text('No image selected.')

            : Image.file(_image),

      ),

      floatingActionButton: Column(

        mainAxisAlignment: MainAxisAlignment.end,

        children: <Widget>[

          FloatingActionButton(

            onPressed: getImage,

            tooltip: 'Select Image',

            child: Icon(Icons.photo_library),

          ),

          SizedBox(height: 16),

          FloatingActionButton(

            onPressed: uploadImage,

            tooltip: 'Upload Image',

            child: Icon(Icons.file_upload),

          ),

        ],

      ),

    );

  }

}


void main() {

  runApp(MaterialApp(

    home: ImageUploadScreen(),

  ));

}


Comments

Post a Comment

Popular posts from this blog

Flutter pagination tutorial

option 1 import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:http/http.dart' as http; // API Service class ApiService {   static const String baseUrl = "https://jsonplaceholder.typicode.com";   static Future<List<dynamic>> fetchData(int page, int limit) async {     final response = await http.get(Uri.parse("$baseUrl/posts?_page=$page&_limit=$limit"));     if (response.statusCode == 200) {       return json.decode(response.body);     } else {       throw Exception("Failed to load data");     }   } } // GetX Controller for Pagination class PaginationController extends GetxController {   var items = <dynamic>[].obs;   var page = 1.obs;   final int limit = 10;   var isLoading = false.obs;   var hasMore = true.obs;   ScrollController scrollController = ScrollController();   @override   void...
Post a Comment
Read more

http model tutorial flutter

 import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; // Define a model class to represent the data class Post {   final int id;   final String title;   final String body;   Post({this.id, this.title, this.body});   factory Post.fromJson(Map<String, dynamic> json) {     return Post(       id: json['id'],       title: json['title'],       body: json['body'],     );   } } class DataFetchScreen extends StatefulWidget {   @override   _DataFetchScreenState createState() => _DataFetchScreenState(); } class _DataFetchScreenState extends State<DataFetchScreen> {   List<Post> posts = [];   bool isLoading = false;   String errorMessage;   Future fetchData() async {     setState(() {       isLoading = true;     });     var url = 'https://jsonplaceholder.t...
Post a Comment
Read more

Building a Dynamic Product List with GetX in Flutter

Building a Dynamic Product List with GetX in Flutter Learn how to create a responsive product screen using GetX in Flutter. This tutorial covers API integration, pagination, cart management, and quantity selection with efficient state management. Perfect for building an e-commerce app! class ProductScreenController extends GetxController{      RxList<Product> productList = <Product>[].obs;   RxList<Product> cartList = <Product>[].obs;   RxMap<int , int> quantityMap = <int , int>{}.obs;   RxMap<int, bool> showQuantitySelector = <int, bool>{}.obs; // ✅ Track Visibility of Quantity Selector   RxBool isLoading = false.obs;   RxBool isLoadingMore = false.obs;   final Dio dio = Dio();   int limit = 10;   int skip = 0;   bool hasMore = true; // ✅ Track if more data is available   @override   void onInit() {  // ✅ Automatically Call API when Controller initializes   ...
Post a Comment
Read more