flutter api image parameter showing null - api

hello i am new to flutter and i m using update profile api in my profile api i describe all parameter and image base 64 also now what is going on ! suppose alredy is image showing on my profile pic and i never pic image from my camera and device My "Profile Pic" parameter showing null when i call it...! and when i picke image from my device it showing base 64...! what i want is if there is alredy image showing then profile api function i want success because there is alredy image shown ... now u suggest me when i call Profile api function on my Button wht i need to pass
PickedFile _imageFile;
final ImagePicker _picker = ImagePicker();
String img64;
void takePhoto(ImageSource source) async {
final pickedFile = await _picker.getImage(source: source);
setState(() {
_imageFile = pickedFile;
final bytes = Io.File(_imageFile.path).readAsBytesSync();
img64 = base64Encode(bytes);
print(img64.substring(0, 100));
});
}
Profile(String FirstnName,String Lastname,String Email,String DOB,String
Anniversary) async {
sharedPreferences = await SharedPreferences.getInstance();
ValidateCustomer();
Map data =
{
"AccessToken": sharedPreferences.getString("AccessToken"),
"CustomerId": sharedPreferences.getInt("CustomerId"),
"FirstName": FirstnName ,
"LastName": Lastname,
"Email": Email,
"DOB":DOB,
"AnniversaryDate": Anniversary,
"ProfilePicture" : img64
};
print(data);
final http.Response response = await http.post(
Constants.CUSTUMER_WEBSERVICE_UPDATEPROF_URL,
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(data),
);
var jsonResponse;
if (response.statusCode == 200)
{
print(sharedPreferences.setString("FirstName", FirstnName));
jsonResponse = json.decode(response.body);
sharedPreferences = await SharedPreferences.getInstance();
sharedPreferences.setString("FirstName", FirstnName);
sharedPreferences.setString("ProfilePicture",img64);
print("Response status : ${response.statusCode}");
print("Response status : ${response.body}");
print(sharedPreferences);
if(jsonResponse != null && ! jsonResponse.containsKey("Error")){
setState(() {
_isLoading = false;
});
print(sharedPreferences);
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=>
ShelfScreen())
);
}
else{
setState(() {
_isLoading = false;
});
print("Response status : ${response.body}");
}
}
if (response.statusCode == 404){
print("Response status : ${response.statusCode}");
print("Response status : ${response.body}");
}
}
Future<UserUpdate>ProfileUpadte() async {
sharedPreferences = await SharedPreferences.getInstance();
ValidateCustomer();
Map data =
{
"AccessToken": sharedPreferences.getString("AccessToken"),
"CustomerId": sharedPreferences.getInt("CustomerId"),
};
print(data);
final http.Response response = await http.post(
"http://api.pgapp.in/v1/userdetails",
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(data),
);
if (response.statusCode == 200)
{
print("Response status : ${response.statusCode}");
print("Response status : ${response.body}");
var jsonResponse = json.decode(response.body);
if(jsonResponse != null && ! jsonResponse.containsKey("Error")){
sharedPreferences = await SharedPreferences.getInstance();
sharedPreferences.setString("ProfilePicture",
jsonResponse["ProfilePicture"]);
sharedPreferences.setString("FirstName", jsonResponse["FirstName"]);
print(sharedPreferences);
}
else{
setState(() {
_isLoading = false;
});
print("Response status : ${response.body}");
}
return UserUpdate.fromJson(json.decode(response.body));
}
else {
// If the server did not return a 201 CREATED response,
// then throw an exception.
throw Exception('Failed to load data');
}
}
void nextField ({String value,FocusNode focusNode}){
if (value.isNotEmpty){
focusNode.requestFocus();
}
}
AnimationController _controller;
Animation _animation;
FocusNode _focusNode1 = FocusNode();
bool _isLoading = false;
String _Firstnm;
String _Lastnm;
String _Mobno;
String _Email;
String _Dob;
String _Anniversary;
DateTime _selectedDate;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
FocusNode Firstname;
FocusNode LastndName;
FocusNode Email;
FocusNode DOB;
FocusNode Anniversary;
Future<UserUpdate> _futureProfileupdate;
#override
void initState() {
// TODO: implement initState
super.initState();
Firstname = FocusNode();
LastndName = FocusNode();
Email = FocusNode();
DOB = FocusNode();
Anniversary = FocusNode();
_futureProfileupdate = ProfileUpadte();
}
void _showPicker(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return SafeArea(
child: Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.photo_library),
title: new Text('Photo Library'),
onTap: () {
takePhoto(ImageSource.gallery);
Navigator.of(context).pop();
}),
new ListTile(
leading: new Icon(Icons.photo_camera),
title: new Text('Camera'),
onTap: () {
takePhoto(ImageSource.camera);
Navigator.of(context).pop();
},
),
],
),
),
);
}
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: (_isLoading) ? Center(child: CircularProgressIndicator()) :
FutureBuilder<UserUpdate>(
future: _futureProfileupdate,
builder: (context, snapshot) {
if (snapshot.hasData) {
TextEditingController _textEditingControllerFirstNamee =
TextEditingController(text: snapshot.data.firstName);
TextEditingController _textEditingControllerLastnamee = TextEditingController(text: snapshot.data.lastName);
TextEditingController _textEditingControllerEmaill = TextEditingController(text: snapshot.data.email);
TextEditingController _textEditingControllerDOBb = TextEditingController(text: snapshot.data.dob);
TextEditingController _textEditingControllerAnniversaryy = TextEditingController(text: snapshot.data.anniversaryDate);
_selectDate(BuildContext context) async {
DateTime newSelectedDate = await showDatePicker(
context: context,
initialDate: _selectedDate != null ? _selectedDate : DateTime.now(),
firstDate: DateTime(1920),
lastDate: DateTime(2040),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.dark().copyWith(
colorScheme: ColorScheme.dark(
primary: Colors.deepPurple,
onPrimary: Colors.white,
surface: Colors.blueGrey,
onSurface: Colors.yellow,
),
dialogBackgroundColor: Colors.blue[500],
),
child: child,
);
});
if (newSelectedDate != null) {
_selectedDate = newSelectedDate;
_textEditingControllerDOBb
..text = DateFormat.yMMMd().format(_selectedDate)
..selection = TextSelection.fromPosition(TextPosition(
offset: _textEditingControllerDOBb.text.length,
affinity: TextAffinity.upstream));
}
}
_selectDate2(BuildContext context) async {
DateTime newSelectedDate = await showDatePicker(
context: context,
initialDate: _selectedDate != null ? _selectedDate : DateTime.now(),
firstDate: DateTime(1920),
lastDate: DateTime(2040),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.dark().copyWith(
colorScheme: ColorScheme.dark(
primary: Colors.deepPurple,
onPrimary: Colors.white,
surface: Colors.blueGrey,
onSurface: Colors.yellow,
),
dialogBackgroundColor: Colors.blue[500],
),
child: child,
);
});
if (newSelectedDate != null) {
_selectedDate = newSelectedDate;
_textEditingControllerAnniversaryy
..text = DateFormat.yMMMd().format(_selectedDate)
..selection = TextSelection.fromPosition(TextPosition(
offset: _textEditingControllerAnniversaryy.text.length,
affinity: TextAffinity.upstream));
}
}
return Form(
key: _formKey,
child: Stack(
children: <Widget>[
Positioned(
left: 20,
top: 40,
child: Center(
child: Image.asset(
'assets/images/logo.png', height: 50, width: 50,),
)
),
Positioned(
left: 60,
right: 60,
top: 40,
child: Center(
child: Image.asset(
'assets/images/Textimage.png', height: 50,
width: 170,),
)
),
Positioned(
right: 20,
top: 40,
child: Center(
child: IconButton(
icon: Icon(Icons.exit_to_app, size: 30,
color: Color(0xfff58634),),
onPressed: () async {
showAboutDialog(context);
},
)
)
),
Positioned(
left: 70,
right: 70,
top: 110,
child: Center(
child: CircleAvatar(
backgroundImage: _imageFile == null ? NetworkImage(
snapshot.data.profilePicture) : FileImage(Io.File(_imageFile.path)),
backgroundColor: Colors.grey,
maxRadius: 50,
)
)
),
Positioned(
left: 100,
right: 70,
top: 170,
child: InkWell(
onTap: (){
_showPicker(context);
},
child: Icon(
Icons.camera_alt,
color: Colors.white,
size: 30,
),
),
),
Positioned(
left: 30,
right: 30,
top: 250,
child: Container(
height: 480,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 5),
child: SizedBox(
height: 70,
child: TextFormField(
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
textInputAction: TextInputAction.next,
focusNode: Firstname,
onFieldSubmitted: (value) {
nextField(
value: value, focusNode: LastndName);
},
controller: _textEditingControllerFirstNamee,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0),
borderSide: BorderSide(
color: const Color(0x3df58634)
)
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0)
),
labelText: "First Name",
labelStyle: GoogleFonts.nunito(
color: const Color(0xfff58634)),
hintText: "First Name",
hintStyle: GoogleFonts.nunito(
color: const Color(0xfff58634)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0),
borderSide: BorderSide(
color: const Color(0x3df58634),
)
),
),
validator: (String value) {
if (value.isEmpty) {
return 'First Name is Required';
}
return null;
},
onSaved: (String value) {
_Firstnm = value;
},
),
),
),
Padding(
padding: const EdgeInsets.only(top: 5),
child: SizedBox(
height: 70,
child: TextFormField(
keyboardType: TextInputType.text,
textCapitalization:
TextCapitalization.sentences,
focusNode: LastndName,
textInputAction: TextInputAction.next,
onFieldSubmitted: (value) {
nextField(value: value, focusNode:
Email);
},
controller:
_textEditingControllerLastnamee,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0),
borderSide: BorderSide(
color: const Color(0x3df58634)
)
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0)
),
labelText: 'Last Name',
labelStyle: GoogleFonts.nunito(
color: const Color(0xfff58634)),
hintText: "Last Name",
hintStyle: GoogleFonts.nunito(
color: const Color(0xfff58634)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0),
borderSide: BorderSide(
color: const Color(0x3df58634),
)
),
),
validator: (String value) {
if (value.isEmpty) {
return 'First Name is Required';
}
return null;
},
onSaved: (String value) {
_Lastnm = value;
},
),
),
),
Padding(
padding: const EdgeInsets.only(top: 5),
child: SizedBox(
height: 70,
child: TextFormField(
focusNode: Email,
textInputAction: TextInputAction.next,
onFieldSubmitted: (value) {
nextField(value: value, focusNode: DOB);
},
controller: _textEditingControllerEmaill,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0),
borderSide: BorderSide(
color: const Color(0x3df58634)
)
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0)
),
labelText: 'Email',
labelStyle: GoogleFonts.nunito(
color: const Color(0xfff58634)),
hintText: "Email",
hintStyle: GoogleFonts.nunito(
color: const Color(0xfff58634)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
5.0),
borderSide: BorderSide(
color: const Color(0x3df58634),
)
),
),
validator: (value) => EmailValidator.validate(value) ? null : "Please enter a valid email",
onSaved: (String value) {
_Email = value;
},
),
),
),
Padding(
padding: EdgeInsets.only(top: 45),
child: SizedBox(
width: 360,
height: 45,
child: RaisedButton(
onPressed: () {
if (!_formKey.currentState.validate()) {
return;
}
setState(() {
_isLoading = true;
});
Profile(
_textEditingControllerFirstNamee.text,
_textEditingControllerLastnamee.text,
_textEditingControllerEmaill.text,
_textEditingControllerDOBb.text,
_textEditingControllerAnniversaryy
.text,);
Navigator.of(context).push(MaterialPageRoute(builder: (context) => ShelfScreen()));
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(
5.0)),
color: const Color(0xfff58634),
child: Text(
"Update",
style: GoogleFonts.nunito(
color: const Color(0xffffffff),
fontSize: 20
),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 120),
child: Text(".", style: TextStyle(
color: Colors.transparent, fontSize: 1,
),),
)
],
),
),
),
),
],
),
);
} else {
return CircularProgressIndicator();
);
}
}
)
);
}
}
class AlwaysDisabledFocusNode extends FocusNode {
#override
bool get hasFocus => false;
}

Related

Flutter Multiple Checkbox From API

I have been able to display Json data from API in FutureBuilder Widget. However, the widget has checkbox for each list. Whenever I check on one list, the whole list get checked.
I want a help on how to check each list individually and be able to use the data of the selected list.
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mar/Components/mydrawer.dart';
import 'package:mar/Services/auth.dart';
import 'package:mar/sccreens/readRequirements.dart';
import 'package:mar/sccreens/scanAnalysis.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../constants.dart';
import 'infoAnalysis.dart';
import 'login_screen.dart';
class Know extends StatefulWidget {
static String id = 'Know';
#override
_KnowState createState() => _KnowState();
}
class _KnowState extends State<Know> {
List sympotms = [];
int currentIndex = 2;
bool valuefirst = false;
int _bottomBarIndex = 0;
Auth _auth;
showdialogall(context, String mytitle, String mycontent) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
title: Text(
mytitle,
style: TextStyle(color: Colors.deepOrange),
),
content: Text(mycontent),
actions: [
Center(
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
color: kMainColor,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ReadReq()),
);
},
child: Text(
"Requirements",
style: TextStyle(color: Colors.black),
)),
),
],
);
});
}
Future fetchdata() async {
var res = await http.get("http://10.0.2.2/medical/symptoms.php");
if (res.statusCode == 200) {
var obj = json.decode(res.body);
return obj;
}
}
bool isSearching = false;
#override
void initState() {
fetchdata().then((data) {
setState(() {
sympotms = data;
});
});
super.initState();
}
void _filterSymptoms(value) {
setState(() {
filteredsympotms = sympotms
.where(
(sym) => sym['name'].toLowerCase().contains(value.toLowerCase()))
.toList();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: kMainColor,
title: Text(
"Know Your Analysis",
style: TextStyle(
fontFamily: 'Pacifico',
),
),
actions: <Widget>[
FlatButton(
child: CircleAvatar(
child: Image(
image: AssetImage('images/icons/medical.png'),
),
backgroundColor: Colors.black,
),
onPressed: () {
Navigator.pushNamed(context, Scan.id);
},
),
],
centerTitle: true,
),
drawer: MyDrawer(),
body: Column(
children: [
Expanded(
child: sympotms.length > 0
? ListView.builder(
itemBuilder: (_, index) {
return Container(
child: Row(
children: [
SizedBox(width: 10),
Checkbox(
value: this.valuefirst,
onChanged: (bool value) {
setState(() {
valuefirst = value;
});
},
checkColor: Colors.greenAccent,
activeColor: Colors.black,
),
Text(
"${sympotms[index]['SymptomsName']}",
style: TextStyle(fontSize: 17.0),
),
],
),
);
},
itemCount: sympotms.length,
)
: Container(child: Center(child: Text("Loading..."))),
),
RaisedButton(
child: Text(
" Submit ",
style: TextStyle(fontSize: 20),
),
onPressed: () {
showdialogall(context, "Result !", "CBC Test");
},
// onPressed: showdialogall(context, "Result !", "CBC Test"),
color: Colors.green,
textColor: Colors.white,
splashColor: Colors.grey,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
),
],
),
//Navigation
bottomNavigationBar: BottomNavyBar(
animationDuration: Duration(milliseconds: 800),
curve: Curves.easeInOut,
selectedIndex: currentIndex,
onItemSelected: (index) async {
if (index == 0) {
Navigator.pushNamed(context, Scan.id);
}
if (index == 1) {
Navigator.pushNamed(context, Information.id);
}
if (index == 2) {
Navigator.pushNamed(context, Know.id);
}
if (index == 3) {
SharedPreferences pref = await SharedPreferences.getInstance();
pref.clear();
await _auth.signOut();
Navigator.popAndPushNamed(context, LoginScreen.id);
}
setState(() {
currentIndex = index;
});
},
items: <BottomNavyBarItem>[
BottomNavyBarItem(
icon: Icon(
Icons.camera_alt,
),
title: Text('Scan'),
activeColor: Colors.black,
inactiveColor: Colors.black,
),
BottomNavyBarItem(
icon: Icon(
Icons.perm_device_information,
),
title: Text('Information'),
activeColor: Colors.black,
inactiveColor: Colors.black,
),
BottomNavyBarItem(
icon: Icon(
Icons.open_in_new_outlined,
),
title: Text('Know analysis'),
activeColor: Colors.black,
inactiveColor: Colors.black,
),
],
),
);
}
}
I want a help on how to check each list individually and be able to use the data of the selected list.
this image display my problem
You can do it by storing the selected index in an array.
Here is the idea.
final selectedIndexes = [];
/// In List View
ListView.builder(
itemBuilder: (_, index) {
return Container(
child: Row(
children: [
SizedBox(width: 10),
Checkbox(
value: selectedIndexes.contains(index),
onChanged: (bool value) {
if(selectedIndexes.contains(index) {
selectedIndexes.remove(index); // unselect
} else {
selectedIndexes.add(index); // select
}
setState(() {});
},
checkColor: Colors.greenAccent,
activeColor: Colors.black,
),
Text(
"${sympotms[index]['SymptomsName']}",
style: TextStyle(fontSize: 17.0),
),
],
),
);
},
itemCount: sympotms.length,
)
Since now you have stored the indexes, you can get whatever data you want for selected checkboxes.

Flutter api reloads every navigation

Whenever I change the page and come back, the api is reloaded. I have tried many suggestions. I would be glad if you help.
Here are the methods I tried :
How to avoid reloading data every time navigating to page
How to parse JSON only once in Flutter
Flutter Switching to Tab Reloads Widgets and runs FutureBuilder
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'models/Word.dart';
class WordListPage extends StatefulWidget {
WordListPage(Key k) : super(key: k);
#override
_WordListPageState createState() => _WordListPageState();
}
class _WordListPageState extends State<WordListPage> {
Future<List<Word>> data;
bool isSearching = false;
TextEditingController myController = TextEditingController();
List<Word> _words = List<Word>();
List<Word> _wordsForDisplay = List<Word>();
var keyListPage = PageStorageKey('list_page_key');
Future<List<Word>> getWord() async {
var response = await http.get("myAPIurl");
var _words = List<Word>();
_words = (json.decode(utf8.decode(response.bodyBytes)) as List)
.map((singleWordMap) => Word.fromJsonMap(singleWordMap))
.toList();
return _words;
}
#override
void initState() {
getWord().then((value) {
setState(() {
_words.addAll(value);
_wordsForDisplay = _words;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: myFutureBuilder(),
appBar: AppBar(
leading: Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: 'Total',
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 10,
color: Colors.white,
),
),
TextSpan(
text: '\n${_words.length.toString()}',
style: TextStyle(
decoration: TextDecoration.none,
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 12,
),
),
TextSpan(
text: '\nLetter',
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontSize: 10,
),
),
],
),
),
),
centerTitle: true,
title: !isSearching
? Text('My Title')
: TextField(
autofocus: true,
style: TextStyle(color: Colors.white),
controller: myController,
onChanged: (value) {
value = value.toLowerCase();
setState(
() {
_wordsForDisplay = _words.where(
(word) {
var wordTitle = word.word.toLowerCase();
return wordTitle.contains(value);
},
).toList();
},
);
setState(
() {
_wordsForDisplay = _words.where(
(word) {
var wordPronounce = word.pronunciation.toLowerCase();
return wordPronounce.contains(value);
},
).toList();
},
);
},
decoration: InputDecoration(
isCollapsed: true,
icon: Icon(
Icons.menu_book,
color: Colors.white,
),
hintText: 'Search',
hintStyle: TextStyle(color: Colors.white),
),
),
actions: [
isSearching
? IconButton(
icon: Icon(Icons.cancel_outlined),
onPressed: () {
setState(
() {
this.isSearching = false;
myController.clear();
_wordsForDisplay = _words.where(
(word) {
var wordTitle = word.word.toLowerCase();
return wordTitle.contains(wordTitle);
},
).toList();
},
);
},
)
: IconButton(
icon: Icon(Icons.search_sharp),
onPressed: () {
setState(
() {
this.isSearching = true;
},
);
},
),
],
),
);
}
FutureBuilder<List<Word>> myFutureBuilder() {
return FutureBuilder(
future: getWord(),
builder: (context, AsyncSnapshot<List<Word>> snapshot) {
if (snapshot.hasData) {
return myWordListView(snapshot);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
);
}
ListView myWordListView(AsyncSnapshot<List<Word>> snapshot) {
return ListView.builder(
itemCount: _wordsForDisplay.length,
itemBuilder: (context, index) {
return ExpansionTile(
title: Text(
_wordsForDisplay[index].word,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16.0),
),
subtitle: Text(
snapshot.data[index].pronunciation[0].toUpperCase() +
snapshot.data[index].pronunciation.substring(1),
),
leading: CircleAvatar(
child: Text(snapshot.data[index].word[0]),
),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 7.0, horizontal: 19.0),
child: RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: snapshot.data[index].word + ' : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
TextSpan(text: snapshot.data[index].meaning),
],
),
),
),
),
],
),
],
);
},
);
}
}
When you navigate and return back, the build method is called. Here you have "myFutureBuilder" placed as the body widget of Scaffold, thus this code get executed, within it "getWord" method is called, an it fetches data from the api everytime.
I suggest you to remove "myFutureBuider" and use "myWirdListView" directly as the body of the scaffold. Change myWordListView(List<Word> listOfWord) to use the word list you have already fetched in the initState() .
You need to to separate your api call from your ui. That way your api will only get called when you want it to. I recommend using some kind of external state management library, such as Provider, BLoC, or RxDart. Flutter will rebuild a widget anytime it wants to, beyond when you trigger it.
you passed getWord() as a function to you future builder so each time the widget get rebuilt, it is called.
To solve that, declare a variable Future<Word> getWordFuture ; , Inside initState assign getWordFuture = getWord(); and use getWordFuture in the Future builder.
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'models/Word.dart';
class WordListPage extends StatefulWidget {
WordListPage(Key k) : super(key: k);
#override
_WordListPageState createState() => _WordListPageState();
}
class _WordListPageState extends State<WordListPage> {
Future<List<Word>> data;
bool isSearching = false;
TextEditingController myController = TextEditingController();
List<Word> _words = List<Word>();
List<Word> _wordsForDisplay = List<Word>();
var keyListPage = PageStorageKey('list_page_key');
Future<List<Word>> getWordFuture = Future<List<Word>> ; //1
Future<List<Word>> getWord() async {
var response = await http.get("myAPIurl");
var _words = List<Word>();
_words = (json.decode(utf8.decode(response.bodyBytes)) as List)
.map((singleWordMap) => Word.fromJsonMap(singleWordMap))
.toList();
return _words;
}
#override
void initState() {
getWordFuture = getWord(); //2
getWord().then((value) {
setState(() {
_words.addAll(value);
_wordsForDisplay = _words;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: myFutureBuilder(),
appBar: AppBar(
leading: Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: 'Total',
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 10,
color: Colors.white,
),
),
TextSpan(
text: '\n${_words.length.toString()}',
style: TextStyle(
decoration: TextDecoration.none,
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 12,
),
),
TextSpan(
text: '\nLetter',
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontSize: 10,
),
),
],
),
),
),
centerTitle: true,
title: !isSearching
? Text('My Title')
: TextField(
autofocus: true,
style: TextStyle(color: Colors.white),
controller: myController,
onChanged: (value) {
value = value.toLowerCase();
setState(
() {
_wordsForDisplay = _words.where(
(word) {
var wordTitle = word.word.toLowerCase();
return wordTitle.contains(value);
},
).toList();
},
);
setState(
() {
_wordsForDisplay = _words.where(
(word) {
var wordPronounce = word.pronunciation.toLowerCase();
return wordPronounce.contains(value);
},
).toList();
},
);
},
decoration: InputDecoration(
isCollapsed: true,
icon: Icon(
Icons.menu_book,
color: Colors.white,
),
hintText: 'Search',
hintStyle: TextStyle(color: Colors.white),
),
),
actions: [
isSearching
? IconButton(
icon: Icon(Icons.cancel_outlined),
onPressed: () {
setState(
() {
this.isSearching = false;
myController.clear();
_wordsForDisplay = _words.where(
(word) {
var wordTitle = word.word.toLowerCase();
return wordTitle.contains(wordTitle);
},
).toList();
},
);
},
)
: IconButton(
icon: Icon(Icons.search_sharp),
onPressed: () {
setState(
() {
this.isSearching = true;
},
);
},
),
],
),
);
}
FutureBuilder<List<Word>> myFutureBuilder() {
return FutureBuilder(
//future: getWord(),
future:getWordFuture,
builder: (context, AsyncSnapshot<List<Word>> snapshot) {
if (snapshot.hasData) {
return myWordListView(snapshot);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
);
}
ListView myWordListView(AsyncSnapshot<List<Word>> snapshot) {
return ListView.builder(
itemCount: _wordsForDisplay.length,
itemBuilder: (context, index) {
return ExpansionTile(
title: Text(
_wordsForDisplay[index].word,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16.0),
),
subtitle: Text(
snapshot.data[index].pronunciation[0].toUpperCase() +
snapshot.data[index].pronunciation.substring(1),
),
leading: CircleAvatar(
child: Text(snapshot.data[index].word[0]),
),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 7.0, horizontal: 19.0),
child: RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: snapshot.data[index].word + ' : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
TextSpan(text: snapshot.data[index].meaning),
],
),
),
),
),
],
),
],
);
},
);
}
}

How to get ListView builder data using api response in flutter ui using provider

Im trying to get an response from provider and fetching in a ui page but when i try to add an response to ui it shows an error
The getter 'data' was called on null. Receiver: null Tried calling: data
In this Line:
ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: doctorList.data.length,
primary: true,
is this is correct approuch or need to change modal class or ui integration.
im accessing data through doctorList.data.->datas data.
My response modal class.
import 'dart:convert';
Doctorlist doctorlistFromJson(String str) => Doctorlist.fromJson(json.decode(str));
String doctorlistToJson(Doctorlist data) => json.encode(data.toJson());
class Doctorlist {
Doctorlist({
this.status,
this.message,
this.data,
});
int status;
String message;
List<Datum> data;
factory Doctorlist.fromJson(Map<String, dynamic> json) => Doctorlist(
status: json["status"],
message: json["message"],
data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"status": status,
"message": message,
"data": List<dynamic>.from(data.map((x) => x.toJson())),
};
}
class Datum {
Datum({
this.id,
this.mobile,
this.userImage,
this.emrNumber,
this.hospital,
this.status,
this.doctorName,
this.docRole,
this.email,
this.gender,
this.address,
this.city,
this.state,
this.pincode,
this.clinicName,
this.appointmentDate,
this.favourite,
});
String id;
String mobile;
String userImage;
String emrNumber;
String hospital;
String status;
String doctorName;
String docRole;
String email;
String gender;
String address;
String city;
String state;
String pincode;
String clinicName;
DateTime appointmentDate;
String favourite;
factory Datum.fromJson(Map<String, dynamic> json) => Datum(
id: json["id"],
mobile: json["mobile"],
userImage: json["user_image"],
no: json["no"],
hospital: json["hospital"],
status: json["status"],
doctorName: json["doctor_name"],
docRole: json["doc_role"],
email: json["email"],
gender: json["gender"],
address: json["address"],
city: json["city"],
state: json["state"],
pincode: json["pincode"],
clinicName: json["clinic_name"],
appointmentDate: DateTime.parse(json["appointment_date"]),
favourite: json["favourite"],
);
Map<String, dynamic> toJson() => {
"id": id,
"mobile": mobile,
"user_image": userImage,
"emr_number": emrNumber,
"hospital": hospital,
"status": status,
"doctor_name": doctorName,
"doc_role": docRole,
"email": email,
"gender": gender,
"address": address,
"city": city,
"state": state,
"pincode": pincode,
"clinic_name": clinicName,
"appointment_date": "${appointmentDate.year.toString().padLeft(4, '0')}-${appointmentDate.month.toString().padLeft(2, '0')}-${appointmentDate.day.toString().padLeft(2, '0')}",
"favourite": favourite,
};
}
My Provider class:
class DoctorListProvider extends ChangeNotifier {
Doctorlist doctorList;
Future<Doctorlist> doctorlist() async {
try {
final response = await http.post(
(Commons.baseURL + "/list"),
headers: {
"Accept": "application/json",
"content-type": "application/json",
},body:{"id":5});
if (response.statusCode == 200) {
var responseJson = Commons.returnResponse(response);
doctorList = Doctorlist.fromJson(responseJson);
print(doctorList);
return Doctorlist.fromJson(responseJson);
} else {
return null;
}
} on SocketException {
return null;
}
}
}
my ui List View builder page :
class _DoctorState extends State<Doctor> {
Doctorlist doctorList;
bool fav = true;
#override
void initState() {
doctorList =
Provider.of<DoctorListProvider>(context, listen: false).doctorList;
super.initState();
}
#override
Widget build(BuildContext context) {
ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: doctorList.data.length,
// itemCount: 2,
// reverse: false,
primary: true,
itemBuilder: (BuildContext context, int index) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Flexible(
child:
Container(child:
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => Doctordetails()));
},
child:
Card(
// color: Color(0xff29ABE2),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: 100,
),
child: Padding(
padding: EdgeInsets.only(
left: 10,
right: 0,
top: 10),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment
.start,
crossAxisAlignment:
CrossAxisAlignment
.start,
children: <
Widget>[
Container(
decoration:
new BoxDecoration(
borderRadius:
BorderRadius.all(
const Radius.circular(100.0)),
border: Border.all(
color: Colors
.black),
),
height: 70,
width: 70,
child:
ClipRRect(
borderRadius:
BorderRadius.circular(
200),
child: Image
.asset(
'assets/images/registration/profile_side.png',
fit: BoxFit
.fill,
),
),
),
SizedBox(
width: MediaQuery.of(
context)
.size
.height /
80,
),
Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: <
Widget>[
Text(
"no",
style: TextStyle(
fontFamily:
"SansBold",
fontSize:
15,
color:
Colors.black),
),
Text(
"no",
style: TextStyle(
fontFamily:
"SansRegular",
fontSize:
15,
color:
Colors.black),
),
SizedBox(
height: 5,
),
SizedBox(
height: MediaQuery.of(context)
.size
.height /
13,
width: MediaQuery.of(context)
.size
.width /
1.9,
child:
AutoSizeText(
'no ',
style: TextStyle(
fontSize:
20),
maxLines:
3,
),
)
],
),
Container(
child:
IconButton(
onPressed:
() {
setState(
() {
fav =
!fav;
});
},
icon: fav
? Image.asset(
"assets/images/appointment/favourite_unselected.png")
: Image.asset(
"assets/images/appointment/favourite_select.png"),
))
],
),
SizedBox(
height: 5,
),
Row(
children: <
Widget>[
Container(
child: IconButton(
icon: Image
.asset(
"assets/images/appointment/last_appointment.png"),
onPressed:
null),
),
SizedBox(
width: 10,
),
Text(
"Last appointment date",
style: TextStyle(
fontFamily:
"SansRegular",
fontSize:
15,
color: Colors
.black),
)
],
),
Container(
child: Text(
"06-08-2020"),
),
],
),
SizedBox(
width: MediaQuery.of(
context)
.size
.width /
40,
),
],
))))))))
],
);
},
),
My Json response Look Like this.
{
"status": 1,
"message": "success",
"data": [
{
"id": "1",
"mobile": "7",
"user_image": "https://hghjfjd.com",
"emr_number": "er-357",
"hospital": "ff",
"status": "1",
"doctor_name": "sanje",
"doc_role": "dfd",
"email": "doctor#gmail.com",
"gender": "Male",
"address": "test mode",
"city": "england",
"state": "tn",
"pincode": "633211",
"clinic_name": "clinic",
"appointment_date": "2020-09-07",
"favourite": "No"
},
Try this:
): Edit initState() method to:
#override
void initState(){
WidgetsBinding.instance.addPostFrameCallback((_) => _afterLayout(context));
}
): Now you can load items in _afterLayout(context) method:
_afterLayout(BuildContext context) async {
var docState = Provider.of<DoctorListProvider>(context);
docState.setDoctorList(await docState.doctorlist());
}
): Update this class DoctorListProvider :
class DoctorListProvider extends ChangeNotifier {
Doctorlist _doctorList;
Doctorlist get getDoctorList => _doctorList;
set setDoctorList(Doctorlist input){
_doctorList = input;
notifierListners();
}
...
}
): Finally use this in you UI :
class _DoctorState extends State<Doctor> {
bool fav = true;
#override
void initState(){
WidgetsBinding.instance.addPostFrameCallback((_) => _afterLayout(context));
}
#override
Widget build(BuildContext context) {
var docState = Provider.of<DoctorListProvider>(context);
return docState.getDoctorList == null ? Container(child: CircularProgressIndicator()) :
ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: docState.getDoctorList.data.length,
// itemCount: 2,
// reverse: false,
primary: true,
itemBuilder: (BuildContext context, int index) {
How I handled that error was that I eradicated or gave "" to the null value.
It's because the data that you are fetting from your API response has a null value.
If you know which value might be null you can assign an empty String value and will solve the error.
Here are the codes of how I did it. It's not professional but it gets your work done.

how to navigate to other page from streambuilder in flutter?

i am trying to implement login functionality using bloc pattern in flutter. So I want to navigate to main page after authentication is successful. from loginBloc.dart I will get the status inside the streamBuilder in login.dart when the status is success I want to navigate to main.dart but I cant able to understand how to call the main.dart inside the streamBuilder in login.dart.
login.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_svg/svg.dart';
import 'package:hotelorders/bloc/LoginBloc.dart';
import 'package:hotelorders/screens/Home.dart';
class Login extends StatefulWidget
{
#override
State<StatefulWidget> createState() {
return LoginState();
}
}
class LoginState extends State<Login>
{
final LoginBloc _loginBloc = LoginBloc();
String _email,_password;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
#override
void dispose()
{
_loginBloc.dispose();
super.dispose();
}
Widget _progressBar()
{
return StreamBuilder<bool>(
stream: _loginBloc.progressStream,
builder: (BuildContext context,AsyncSnapshot<bool> snapShot) {
bool visible;
if(snapShot.data == null)
{
visible = false;
}
else
{
visible = snapShot.data;
}
return Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: visible,
child: Container(
child: Center(
child: SizedBox(
width: 60,
height: 60,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 1.0,
),
],
),
),
Center(
child: CircularProgressIndicator(),
)
],
),
)
)
),
);
}
);
}
Widget _emailTextField()
{
return TextFormField(
decoration: InputDecoration(
labelText: "Email id",
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(32.0),
)
),
keyboardType: TextInputType.emailAddress,
validator: (String value){
if(value.isEmpty || !RegExp(r"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?").hasMatch(value))
{
return "Enter a valid email id";
}
return null;
},
onSaved: (String value){
_email = value;
},
);
}
Widget _passwordTextField()
{
return TextFormField(
decoration: InputDecoration(labelText: "Password",
filled: true,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(32.0),
),
fillColor: Colors.white
),
keyboardType: TextInputType.text,
obscureText: true,
validator: (String value){
if(value.isEmpty)
{
return "Enter a valid password";
}
else if(value.length < 8)
{
return "Password is too short";
}
else
{
return null;
}
},
);
}
void _login()
{
if(!_formKey.currentState.validate())
{
return;
}
_formKey.currentState.save();
Map<String,String> map = new Map();
map['email'] = _email;
map['password'] = _password;
_loginBloc.login(map);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(0, 48, 0, 0),
child: Text(
"Take Orders and",
style: TextStyle(color: Theme.of(context).primaryColorDark,fontSize: 20),
),
),
Container(
child: Text(
"Track the Best Selling Items",
style: TextStyle(color: Theme.of(context).primaryColor,fontSize: 16),
),
),
Container(
margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
child: SvgPicture.asset('assets/images/undraw_booking.svg',width: 100.0,height: 280.0,),
),
Container(
margin: EdgeInsets.fromLTRB(16, 0, 0, 0),
child:Row(
children: <Widget>[
Text(
"Login To ",
style: TextStyle(color: Colors.black,fontSize: 20)
),
Text(
"Take orders",
style: TextStyle(color: Theme.of(context).primaryColorDark,fontSize: 20),
)
],
),
),
Container(
margin: EdgeInsets.fromLTRB(16, 8, 16, 0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
child: _emailTextField(),
),
Container(
margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
child: _passwordTextField(),
),
Container(
margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
child: Align(
alignment: Alignment.centerLeft,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)
),
padding: EdgeInsets.fromLTRB(64, 12, 64, 12),
color: Theme.of(context).accentColor,
textColor: Colors.white,
child: Text(
"Login",
),
onPressed: (){
_login();
},
) ,
),
),
StreamBuilder<dynamic>(
stream:_loginBloc.loginStateStream,
builder: (BuildContext context, AsyncSnapshot<dynamic> snapShot){
if(snapShot.data == "success")
{
// WidgetsBinding.instance.addPostFrameCallback((_){
// Navigator.push(context, MaterialPageRoute(
// builder: (context)=> Home()
// ));
// });
}
else if(snapShot.data != null && snapShot.data != "success")
{
WidgetsBinding.instance.addPostFrameCallback((_) {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('${snapShot.data}',
style: TextStyle(color: Colors.black),),
backgroundColor: Color(0xFFe5e5e5),
));
// showDialog(context: context,builder: (BuildContext con){
// return AlertDialog(
// title: Text('${snapShot.data}'),
// );
// });
});
}
return Container();
},
)
],
),
),
)
],
),
)
),
_progressBar(),
],
),
);
}
}
LoginBloc.dart
import 'dart:async';
class LoginBloc
{
// here event comes in and state goes out
//stream conntroller for output
final _loginStateController = StreamController<String>();
//stream controller for input
final _loginEventController = StreamController<Map<String,String>>();
final _progressController = StreamController<bool>();
StreamSink<String> get loginStateSink => _loginStateController.sink;
Stream<String> get loginStateStream => _loginStateController.stream;
Sink<Map<String,String>> get loginEventSink => _loginEventController.sink;
Stream<bool> get progressStream => _progressController.stream;
StreamSink<bool> get progressSink => _progressController.sink;
LoginBloc()
{
progressSink.add(false);
_loginEventController.stream.listen(login);
}
login(Map<String,String> loginDetails)
{
progressSink.add(true);
Timer(Duration(seconds: 3), () {
progressSink.add(false);
loginStateSink.add("success");
});
// when we pass data in sink we get the output from stream
}
void dispose()
{
_loginEventController.close();
_loginStateController.close();
_progressController.close();
}
}
You are almost there. The following should work :
if(snapShot.data == "success")
{
Navigator.push(
context, MaterialPageRoute(builder: (context)=> Home()));
}
Note : WidgetsBinding.instance.addPostFrameCallback is used to get a callback when widget tree is loaded.

In Flutter How to get image path after selecting images using Multi Image Picker?

I want to get an image path from selected multiple images, I'm using this link to select multiple images but I got assets, I want paths from selected multiple images because I want to upload into the API.
I added this dependency in pubspec.yaml If there any good way to do this, please tell me
multi_image_picker: ^4.6.3
This is my file upload class, This UI looks similar to Facebook.
import 'dart:typed_data';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
class UpdateStatus extends StatefulWidget {
#override
_UpdateStatusState createState() => _UpdateStatusState();
}
class _UpdateStatusState extends State<UpdateStatus> {
List<Asset> images = List<Asset>();
String _error = 'No Error Dectected';
Future<ByteData> byteData;
// List<int> imageData = byteData.buffer.asUint8List();
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Create Post'),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(18.0),
child: InkWell(child: Text('POST',style: TextStyle(fontSize: 18.0),),onTap: ()
{
print('Post this post');
},),
)
],
),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width:MediaQuery.of(context).size.width ,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: 300.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 100,
style: new TextStyle(
fontSize: 18.0,
color: Colors.black
),
decoration: InputDecoration(
hintText: 'Enter your Post Details Here !',
border: InputBorder.none,
),
),
),
),
Divider(
thickness: 1.0,
),
Column(
children: <Widget>[
Container(
height: 40.0,
color: Colors.white70,
child: Padding(
padding:EdgeInsets.only(left: 18.0,),
child: InkWell(
child: Row(
children: <Widget>[
Icon(Icons.add_a_photo,),
Text(" Choose Image",style: TextStyle(fontSize: 24.0,),),
],
),
onTap: ()
{
print(images.toList().toString());
print('choose image from local');
},
),
),
),
Divider(
thickness: 1.0,
),
Container(
height: 40.0,
color: Colors.white70,
child: Padding(
padding:EdgeInsets.only(left: 18.0,),
child: InkWell(
child: Row(
children: <Widget>[
Icon(Icons.add_photo_alternate,),
Text(" Choose Video",style: TextStyle(fontSize: 24.0,),),
],
),
onTap: ()
{
print('choose video from local');
},
),
),
),
],
),
Divider(
thickness: 1.0,
),
Container(
height: 200,
child: Column(
children: <Widget>[
Center(child: Text('Error: $_error')),
RaisedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),
Expanded(
child: buildGridView(),
)
],
),
),
/*
Column(
children: <Widget>[
Center(child: Text('Error: $_error')),
RaisedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),
Expanded(
child: buildGridView(),
)
],
),
*/
],
),
),
),
);
}
Future<void> loadAssets() async {
List<Asset> resultList = List<Asset>();
String error = 'No Error Dectected';
ByteData byteData;
try {
resultList = await MultiImagePicker.pickImages(
maxImages: 300,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Ilma",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
} on Exception catch (e) {
error = e.toString();
}
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
setState(() {
images = resultList;
_error = error;
print('000000000000000000000');
print('000000000000000000000');
print(images);
print('000000000000000000000');
print('000000000000000000000');
});
}
Widget buildGridView() {
return GridView.count(
crossAxisCount: 3,
children: List.generate(images.length, (index) {
Asset asset = images[index];
byteData=asset.getByteData();
print('0000');
print(byteData);
print('0000');
return AssetThumb(
asset: asset,
width: 300,
height: 300,
);
}),
);
}
}
Padding(
padding: const EdgeInsets.all(18.0),
child: InkWell(
child: Text(
'POST',
style: TextStyle(fontSize: 18.0),
),
onTap: () async {
List<MultipartFile> multipart = List<MultipartFile>();
for (int i = 0; i < images.length; i++) {
var path = await FlutterAbsolutePath.getAbsolutePath(images[i].identifier);
}
},
),
)
I'm Using below Code to select multiple images by using file_picker: ^2.0.7 Library.
Long press to select multiple image. Once Image Selected you can use f arr to display the images.
List<File> f = List();
RaisedButton(
child: Text("Pick Image"),
onPressed: () async {
FilePickerResult result = await FilePicker.platform.pickFiles(
allowMultiple: true,
type: FileType.custom,
allowedExtensions: ['jpg', 'png', 'jpeg'],
);
if (result != null) {
f = result.paths.map((path) => File(path)).toList();
setState(() {});
print(f);
}
},
),
Sample API Call For image upload and normal data. Image uploaded column should be arr ( photo[] ).
List<MultipartFile> newList = new List<MultipartFile>();
Future<String> ImageUpload() async {
var request = http.MultipartRequest('POST', url);
request.headers["Authorization"] = pref.getString("token");
request.headers["Accept"] = "application/json";
//Image Data
for (int i = 0; i < f.length; i++) {
newList.add(await http.MultipartFile.fromPath('photo[]', f[i].path));
}
request.files.addAll(newList);
Map<String, dynamic> data = Map<String, String>();
//normal data
data["user_id"] = user_id;
data["project_id"] = pro_id;
request.fields.addAll(data);
var res = await request.send();
if (res.statusCode == 200) {
debugPrint("Status${res}");
}else {
debugPrint("status code${res}");
}
}
Try This You can select and upload multiple images easily. Thank you.
Use multi_image_picker 4.7.14 library to pick Multiple Images. use below code you can send selected asset image as a file. `
//Inside Widget Builder
FlatButton(
child: Image.asset(
"assets/images/camera.png",
color: Colors.grey,
),
onPressed: loadAssets,
),
SizedBox(
// height: SizeConfig.safeBlockHorizontal * 10,
height: MediaQuery.of(context).size.height / 2,
child: Column(
children: <Widget>[
Expanded(
child: buildGridView(),
),
],
),
)
List<File> fileImageArray = [];
List<String> f = List();
List<Asset> resultList = List<Asset>();
List<Asset> images = List<Asset>();
Future<void> loadAssets() async {
try {
resultList = await MultiImagePicker.pickImages(
maxImages: 4,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Example App",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
} on Exception catch (e) {
error = e.toString();
}
if (!mounted) return;
for (int i = 0; i < resultList.length; i++) {
var path =
await FlutterAbsolutePath.getAbsolutePath(resultList[i].identifier);
print(path);
f.add(File(path));
}
setState(() {
images = resultList;
});
// return fileImageArray;
}
//image PreView
Widget buildGridView() {
return GridView.count(
crossAxisCount: 4,
children: List.generate(images.length, (index) {
Asset asset = images[index];
return AssetThumb(
asset: asset,
width: 50,
height: 50,
);
}),
);
}
API Call : while image uploading place use multipart file
List<MultipartFile> newList = new List<MultipartFile>();
Future<String> multiImagePostAPI() async {
var request = http.MultipartRequest('POST', url);
request.headers["Authorization"] = pref.getString("token");
request.headers["Accept"] = "application/json";
for (int i = 0; i < f.length; i++) {
newList.add(await http.MultipartFile.fromPath('photo[]', f[i].path));
}
request.files.addAll(newList);
Map<String, dynamic> data = Map<String, String>();
data["user_id"] = user_id;
data["project_id"] = pro_id;
data["title"] = titleController.text;
request.fields.addAll(data);
var res = await request.send();
if (res.statusCode == 200) {
debugPrint("Status$res");
}else {
debugPrint("status : $res");
}
}
You can also select multiple images using file_picker: ^1.5.0+2 library and easy to get path of selected images
Future<int> getFilePath() async {
try {
files = await FilePicker.getMultiFile();
if (files == '') {
return 0;
}
else
{
setState(() {
this._filePath = files;
return 1;
});
}
} on PlatformException catch (e) {
print("Error while picking the file: " + e.toString());
}
}
show selected images by using ListView Builder like this
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _filePath.length,
itemBuilder: (context,c)
{
return Card(
child: Image.file(_filePath[c],
fit: BoxFit.fill,
width: 400,
height: 400,
),
);
}
),