如何使用图像选择器根据索引在 ListBuilder 上显示所选图像并使用 Sqflite 保留数据

问题描述

使用 Sqflite 保存客户姓名、金额和手机号码并将它们显示在 ListBuilder 上后，我还想根据相应的索引在 ListBuilder 上显示客户图像。我已经实现了图像选择器代码，但是当我从我的图库中选择图像或使用我的相机时，它什么也不显示。我如何显示图像并保留它们？请我需要帮助。谢谢你们。

这是我的代码；

 File _imageFile;
  final picker = ImagePicker();
  String _imagePath;

  //Alert Dialog for picking profile picture
  _pickPicture(mCtx) {
    return showDialog(
        context: mCtx,builder: (context) {
          return simpledialog(
            title: Center(
              child: Text(
                'Upload Profile Image',style: TextStyle(
                    fontWeight: FontWeight.w800,fontSize: 25,color: BluePrimaryColor),),children: [
              simpledialogOption(
                child: Center(
                  child: Text('Capture with Camera'),onpressed: () {
                  _pickImage(ImageSource.camera);
                  Navigator.of(context).pop();
                },simpledialogOption(
                child: Center(
                  child: Text('Select from gallery'),onpressed: () {
                  _pickImage(ImageSource.gallery);
                  Navigator.of(context).pop();
                },simpledialogOption(
                child: Center(
                  child: Text('Cancel'),onpressed: () {
                  Navigator.of(context).pop();
                },],);
        });
  }

//This is the Use to Pick Image from the Source
  Future<void> _pickImage(ImageSource source) async {
    final selected = await picker.getimage(
      source: source,maxWidth: 200.0,maxHeight: 300.0,);
    setState(() {
      if (selected != null){
        _imageFile = File(selected.path);
      }
    });
  }

//Object of the DatabaseHelper Class
  DataBaseHelper _dataBaseHelper;

//Object of the List of the Contact Class.
  List<Contact> _contacts = [];
  Contact _contact = new Contact();

//My Custom ListBuilder to display the Customer Details
  _list() => Center(
        child: ListView.builder(
            itemCount: _contacts.length,itemBuilder: (context,index) {
              return Padding(
                padding: const EdgeInsets.all(4.0),child: Container(
                  width: double.maxFinite,decoration: Boxdecoration(
                    borderRadius: BorderRadius.circular(5),color: Colors.blue.shade100,child: Column(
                    children: [
                      Text(
                        "CUSTOMER DETAILS.",style: TextStyle(
                          fontSize: 14,color: BluePrimaryColor,fontFamily: 'Poppins',fontWeight: FontWeight.bold,Divider(
                        color: BluePrimaryColor,Row(
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(left: 8),child: Container(
                              child: Column(
                                children: [
                                  InkWell(
                                    child: Center(
                                      child: CircleAvatar(
                                        backgroundColor: Colors.white,radius: 32,child: _imagePath == null
                                            ? Icon(
                                          Icons.add_a_photo,size: 35,)
                                            : null,backgroundImage: _imagePath != null
                                            ? FileImage(File(_imagePath))
                                            : null,onTap: () => _pickPicture(context),)
                          ),SizedBox(width: 8),Column(
                            crossAxisAlignment: CrossAxisAlignment.start,children: [
                              RichText(
                                  text: TextSpan(
                                      text: 'NAME:  ',style: TextStyle(
                                        fontSize: 11,letterSpacing: 1,children: [
                                    TextSpan(
                                        text: _contacts[index].name,style: TextStyle(
                                          fontSize: 10,))
                                  ])),RichText(
                                  text: TextSpan(
                                      text: 'AMOUNT:  ₦ ',children: [
                                    TextSpan(
                                        text: _contacts[index].amount,style: TextStyle(
                                          color: BluePrimaryColor,fontSize: 10,RichText(
                                  text: TextSpan(
                                      text: 'MOBILE:  ',style: TextStyle(
                                        fontSize: 10,children: [
                                    TextSpan(
                                        text: _contacts[index].mobile,style: TextStyle(
                                            color: BluePrimaryColor,fontFamily: 'Poppins'))
                                  ])),//My Contact Class for the Customer's Details

class Contact {
  static const tblContact = 'contacts';
  static const colId = 'id';
  static const colName = 'name';
  static const colAmount = 'amount';
  static const colMobile = 'mobile';
  

  Contact.fromMap(Map<String,dynamic> map) {
    id = map[colId];
    name = map[colName];
    amount = map[colAmount];
    mobile = map[colMobile];
  }

  int id;
  String name;
  String amount;
  String mobile;
  String picture;

  Contact({this.id,this.name,this.amount,this.mobile,this.picture});

  Map<String,dynamic> toMap() {
    var map = <String,dynamic>{
      colName: name,colAmount: amount,colMobile: mobile,};
    if (id != null)
      map[colId] = id;
      return map;
  }
}


//My DataBaseHelper Class

 //singleton constructor.
  DataBaseHelper._();
  static final DataBaseHelper instance = DataBaseHelper._();

  //Properties of the db
  Database _database;
  Future<Database> get database async {
    if (_database != null) return _database;
    _database = await _initDatabase();
    return _database;
  }

  _initDatabase() async {
    Directory dataDirectory = await getApplicationDocumentsDirectory();
    String dbPath = join(dataDirectory.path,_databaseName);
    return await openDatabase(dbPath,version: _databaseVersion,onCreate: _onCreateDB);
  }

  Future _onCreateDB(Database db,int version) async {
    await db.execute('''
    CREATE TABLE ${Contact.tblContact}(
        ${Contact.colId} INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,${Contact.colName} TEXT NOT NULL,${Contact.colAmount} TEXT NOT NULL,${Contact.colMobile} TEXT NOT NULL
      )   
    ''');
  }

//Insert function
  Future<int> insertContact(Contact contact) async {
    Database db = await database;
    return await db.insert(Contact.tblContact,contact.toMap());
  }

  //fetch function
  Future <List<Contact>> fetchContact() async {
    final Database db = await database;
    var response = await db.query(Contact.tblContact);
    List<Contact> list = response.isNotEmpty ? response.map((e) => Contact.fromMap(e)).toList() : [];
    return list;
  }


  //UpDate function
  Future<int> updateContact(Contact contact) async {
    Database db = await database;
    return await db.update(Contact.tblContact,contact.toMap(),where: '${Contact.colId}=?',whereArgs: [contact.id]
    );
  }

  //Delete function
  Future<int> deleteContact(int id) async {
    Database db = await database;
    return await db.delete(Contact.tblContact,whereArgs: [id]);
  }

  Future<Contact> getContactByNum(String mobile) async {
    final db = await database;
    var result = await db.query("Contact",where: "colMobile = ?",whereArgs: [mobile]);
    return result.isNotEmpty ? Contact.fromMap(result.first) : null;
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）