I am trying to fetch a list from API that is two methods fetchImages and fetchCategories. the first time it is showing a red screen error and then after 2 seconds automatically it is loading the list. Can you please tell me what's the issue with my code and how to avoid showing that red screen error in my app?
Widget build(context) {
try{
if (isFirst == true) {
fetchImage();
fetchCategories(context);
isFirst = false;
}
}catch(Exception){
}
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Lets see images!'),
),
body: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(
catimages[0],
width: 60.0,
height: 60.0,
),
),
new Text(
categoriesText[0],
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint("on tv clikced");
widget.fetchApI.fetchSubCategories(context, 6);
}),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(
catimages[1],
width: 60.0,
height: 60.0,
),
),
new Text(
categoriesText[1],
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint("on moview clicked");
widget. fetchApI.fetchSubCategories(context, 7);
},
),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(
catimages[2],
width: 60.0,
height: 60.0,
),
),
new Text(
categoriesText[2],
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint("on news clicked");
widget.fetchApI.fetchSubCategories(context, 10);
},
),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(catimages[3],
width: 60.0, height: 60.0),
),
new Text(
categoriesText[3],
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint('on shows clicked');
widget.fetchApI.fetchSubCategories(context, 8);
},
),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset('assets/live_icon.png',
width: 60.0, height: 60.0),
),
new Text(
'Live',
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint('on live clicked');
},
),
],
),
ImageList(images,widget.fetchApI),
],
),
),
);
}
Make sure specifying the length of the list of data. For example, if you're using ListView.builder give proper value to the attribute itemCount.
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (ctx, index) {
return WidgetItem();
});
The problem can be that you are trying to access a variable/array that is not ready yet (maybe because the future/api call is not finished)
A quick workaround could be to check the length of the array or check for null, example:
Text( (myArray?.length > 0 ? myArray[0] : '') );
There are quick-and-dirty answer, and proper answer
Quick-and-dirty
Use list?.elementAt(<index>) ?? "" for safe access to element of a list
Widget build(context) {
try{
if (isFirst == true) {
fetchImage();
fetchCategories(context);
isFirst = false;
}
}catch(Exception){
}
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Lets see images!'),
),
body: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(
catimages?.elementAt(0) ?? "",
width: 60.0,
height: 60.0,
),
),
new Text(
categoriesText?.elementAt(0) ?? "",
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint("on tv clikced");
widget.fetchApI.fetchSubCategories(context, 6);
}),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(
catimages?.elementAt(1) ?? "",
width: 60.0,
height: 60.0,
),
),
new Text(
categoriesText?.elementAt(1) ?? "",
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint("on moview clicked");
widget. fetchApI.fetchSubCategories(context, 7);
},
),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(
catimages?.elementAt(2) ?? "",
width: 60.0,
height: 60.0,
),
),
new Text(
categoriesText?.elementAt(2) ?? "",
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint("on news clicked");
widget.fetchApI.fetchSubCategories(context, 10);
},
),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset(catimages?.elementAt(3) ?? "",
width: 60.0, height: 60.0),
),
new Text(
categoriesText?.elementAt(3) ?? "",
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint('on shows clicked');
widget.fetchApI.fetchSubCategories(context, 8);
},
),
new InkResponse(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: new Image.asset('assets/live_icon.png',
width: 60.0, height: 60.0),
),
new Text(
'Live',
style: TextStyle(color: Colors.white),
),
],
),
onTap: () {
debugPrint('on live clicked');
},
),
],
),
ImageList(images,widget.fetchApI),
],
),
),
);
}
}
Proper answer
Frankly, if I were to review this code, even if it works seamlessly, I would reject this change, because of the structure/pattern this code is using is quite bad.
Please use FutureBuilder, StreamBuilder or ValueListenableBuilder instead, but you need to provide more code (especially fetchImage and fetchCategories) for us to help.
Null safe
Reason for error:
This error occurs on retrieving the value for an index that doesn't exist in the List. For example:
List<int> list = [];
list[0]; // <-- Error since there's no element at index 0 in the list.
Solution:
Check if the the List is not null and has the element at index:
var myList = nullableList;
var index = 0;
if (myList != null && myList.length > index) {
myList[index]; // You can safely access the element here.
}
You are not getting the data. The data folder from or data source is missing. The same happened for me. Later, I created the json file for data and pointed to that location. And it got fixed simply!
I got same issue when tried to access a array which was empty. This was as part of null safety.
my earlier code was
TextBox(response.customerDetails!.address![0].city),
which caused me error so I changed the code to
Text(
(response.cutomerDetails.address.isNotEmpty)
? response.customerDetails!.address![0].city
: "N/A",
),
add a check when accessing arrays. This helped me remove the error.
It happens when you are going to fetch some data but it is not available on that index/position
So, you have to check the index/position value where it is null or not
In my case Listview -> itemcount was perfect but showing this error And then solved it by following checking code
Text("${(widget.topSellItem.subjects.isEmpty) ? "" : widget.topSellItem!.subjects[0].subject.name}"),
I have solved this issue in flutter null safety version by following way.
Reason : It happened when value is not available for that index.
You can check itemCount item value is available or not at builder,
Solution with Null Safety would be like :
ListView.builder(
itemCount: snapshot.data!.items.length, //OR snapshot.data!.length
itemBuilder: (context, index) {
return (index > 0) ? YourWidget() : Container();
});
In case the other methods don't work, check if your database contains any conflicting data entries. If so, fix them.
First, declare the array of objects.
late Map<String, dynamic> product={};
the HTTP answer is:
{
"id": "1",
"codigo": "mw9wcsABvk",
"nombre": "Router TPLink Gaming 5G",
"portada": [
{
"url": "/php/assets/producto/mw9wcsABvk/2729233.png",
"name": "2729233.png"
}
]
}
In Widget build
body: Center(
child: Column(
children: [
if(producto.isNotEmpty)
Expanded(
child: Column(
children: [
ConstrainedBox(
constraints: BoxConstraints.tight(Size(double.infinity, 256)),
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Positioned(
child: Image.network("${host}${producto["portada"][0]["url"]}"),
),
],
),
),
],
),
),
],
),
),
Had same problem when accessing empty arrays, and fix it this ways : data.allData[index].reviews!.isEmpty ? 0 : data.allData[index].reviews![0].rating
when there's data in it, it will access first index.
You must specify the length of the list of data. For example, if you're using ListView along with builder function then you must provide its item length count as itemCount.
ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return //your widget
});
This error comes because of these reasons.
Not using a builder in a screen.
While using a builder we have to provide a condition that checking the list was empty or not. If the list is empty we have to show a circular progress indicator and the list is not empty we can show the list.
If you are fetching data from the API consider using FutureBuilder.
To me, going to the project directory and running the command flutter clean fixed the error
Related
I am trying to display a list using a list title but would like to add a text with a click event to the top of the list.
How could I do it?
I would be very grateful for the help.
I am trying to display a list using a list title but would like to add a text with a click event to the top of the list.
How could I do it?
I would be very grateful for the help.
Code and image::
Widget StatefulBuilderSuggestions(BuildContext context ,List <SearchDelegateModel> historialMenuPrincipal){
return Container(
child:StatefulBuilder(
builder:(context,setState)
{
return Container(
child: ListView.builder(
itemCount: historialMenuPrincipal.length,
itemBuilder: (context,i)
{
contentPadding: EdgeInsets.symmetric(vertical: 12,horizontal: 16);
return
ListTile(
subtitle: Text(historialMenuPrincipal[i] == null ? "no data" :historialMenuPrincipal[i].email,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold,
),
),
title: Text(historialMenuPrincipal[i] == null ? "no data" :historialMenuPrincipal[i].contrasena,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold,
),
),
trailing: historialMenuPrincipal[i] != null || historialMenuPrincipal.isEmpty
? IconButton(
icon: Icon(Icons.cancel,color: Colors.black,),
onPressed: () {
setState(() {
historialMenuPrincipal.remove(historialMenuPrincipal[i]);
});
},): null
);
}
),
);
}
)
);
}
use a column with 2 parts, title as a textbutton and above the list
Container(
child: Column(
children: [
TextButton(
onPressed: () {
hideList = !hideList;
},
child: Text("Title"),
),
hideList ? ListView() : Container(),
],
))
something like this
In order to add a Text widget above a list, both widgets should be inside a column and important thing to note is that ListView widget must be inside a Expanded widget and for the text widget to be clickable, use GestureDetector.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
padding: const EdgeInsets.all(16),
child: Column(
children: [
GestureDetector(
onTap: () {}, child: const Text("Some text above the list")),
Expanded(
child: ListView.builder(
itemCount: 50,
itemBuilder: (context, i) {
return Container(
margin: const EdgeInsets.all(16),
color: Colors.pinkAccent,
child: Text("$i"));
},
),
),
],
),
),
);
}
I am using CarouselSlider in my app and right now it looks like this:
The problem is that I don't want the highlighted/selected widget in the middle but on the right. Like this:
So what I need to do is, moving the whole widget to the right so the right half of the list is out of the view and only the left halt is being displayed. But I have no idea how I can achieve this...
This is my code:
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
height: 50,
child: CarouselSlider.builder(
itemCount: data.length,
itemBuilder:
(BuildContext context, int itemIndex, int pageViewIndex) =>
_buildListItem(itemIndex),
options: CarouselOptions(
viewportFraction: 0.35,
reverse: true,
enlargeCenterPage: true,
onPageChanged: (index, whatever) {
print(index);
},
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
)),
),
);
}
Widget _buildListItem(int index) {
return Container(
color: AppColors.red,
height: 50,
width: 100,
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 8.scaled),
child: Text(
data[index].toString(),
style: AppTextStyles.glossAndBloomH2Regular,
),
),
),
);
}
And this is where I call it:
Positioned(
right: sidePadding,
bottom: 30,
left: sidePadding,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButtonWithExpandedTouchTarget(
onTapped: () {
showModalBottomSheet(
context: context,
backgroundColor: AppColors.transparent,
builder: (BuildContext context) {
return ModalBottomSheetView();
},
);
},
svgPath: 'assets/icons/menue.svg',
),
YearSlider(),
],
),
Every help is appreciated! Let me know if you need anything more
This question already has answers here:
Firestore search array contains for multiple values
(6 answers)
Closed 1 year ago.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
#override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> with TickerProviderStateMixin {
final searchController = TextEditingController();
final _firestore = FirebaseFirestore.instance;
static const defaultSearch = "";
String search = defaultSearch ;
void dispose() {
searchController.dispose();
super.dispose();
}
#override
void initState() {
super.initState();
searchController.addListener(searchChanged);
}
searchChanged() {
setState(() {
search = searchController.text;
});
}
#override
Widget build(BuildContext context) {
var tarifRef = _firestore
.collection("vehicles")
.where("models", arrayContains: search);
return Scaffold(
body: Container(
child: ListView(
children: <Widget>[
Expanded(
child: Container(
height: MediaQuery.of(context).size.height * 0.08,
margin: EdgeInsets.only(top: 25),
child: Text(
"Vehicles",
style: TextStyle(
fontSize: 20, fontFamily: "Quando", color: Colors.indigo),
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(
top: 10.0, bottom: 10.0, right: 30, left: 30),
child: TextField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
),
controller: searchController,
),
),
),
Expanded(
child: Container(
height: MediaQuery.of(context).size.height * 0.50,
child: StreamBuilder<QuerySnapshot>(
stream: tarifRef.snapshots(),
builder: (BuildContext context, AsyncSnapshot asyncsnapshot) {
if (asyncsnapshot.hasError) {
return Center(
child: Text("Error"),
);
} else {
if (asyncsnapshot.hasData) {
List<DocumentSnapshot> listOfDocumentSnapshot =
asyncsnapshot.data.docs;
return Flexible(
child: ListView.builder(
itemCount: listOfDocumentSnapshot.length,
itemBuilder: (context, index) {
return Card(
color: Colors.indigo,
child: ListTile(
title: Text(
"${listOfDocumentSnapshot[index]["name"]}",
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
subtitle: Text(
"${listOfDocumentSnapshot[index]["models"]}",
style: TextStyle(
fontSize: 15,
color: Colors.white,
),
),
trailing: IconButton(
icon: Icon(
Icons.delete,
color: Colors.white,
),
onPressed: () async {
await listOfDocumentSnapshot[index]
.reference
.delete();
},
),
),
);
},
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
}
},
),
),
),
],
),
),
);
}
}
This my all code and also I have database in Firebase like this;
vehicles: [
{
"name": "Vehicle1",
"models": ["bus", "plane", "motorcycle"]
},
{
"name": "Vehicle2",
"models": ["motorcycle", "sporcar", "plane"]
},
{
"name": "Vehicle3",
"models": ["motorcycle", "plane", "bus"]
}
]
In this example I can take one input from user, I can query and display which list includes this data but I want to query more than one data is in lists or not.
For example in this code if user input bus, program display Vehicle1 list but I want user can input more than one data such as plane and motorcycle. And so when the user input the plane and motorcycle, I want it to be displayed the list of Vehicle 2 and Vehicle 3.
I try a lot of different ways but I can't found proparly solution to this problem.
I think you're looking for arrayContainsAny here:
var tarifRef = _firestore
.collection("vehicles")
.where("models", arrayContainsAny: ["bus", "plane"]);
This query will return documents whose models array contains either "bus", "plane" or both.
Also see the FlutterFire documentation for Query.where.
I was working on merging few images and display it as one.
I have two dart files one is for adding images and other is for displaying the merged result.
first file code is,
class SingleImageUpload extends StatefulWidget {
#override
_SingleImageUploadState createState() {
return _SingleImageUploadState();
}
}
class _SingleImageUploadState extends State<SingleImageUpload> {
List<Object> images = List<Object>();
File _selectedFile;
bool _inProcess = false;
Map data = {};
Readerservice _readerservice;
#override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
images.add("Add Image");
images.add("Add Image");
images.add("Add Image");
images.add("Add Image");
});
}
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: Padding(
padding: EdgeInsets.only(left: 12),
child: IconButton(
icon: Icon(Icons.arrow_back_ios,
color: Colors.black,
size: 30,),
onPressed: () {
Navigator.pushNamed(context, '/');
},
),
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
Text('Basic AppBar'),
]
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_vert,
color: Colors.black,
size: 30,),
onPressed: () {
print('Click start');
},
),
],
),
body:
Column(
children: <Widget>[
SizedBox(height: 10),
Row(children: <Widget>[
Text('Image',
style: TextStyle(
color: Colors.black,
fontSize: 33,
fontWeight: FontWeight.bold,
)),
Text('Merger',
style: TextStyle(
color: Colors.orange,
fontSize: 33,
fontWeight: FontWeight.bold,
)),
]),
SizedBox(height: 40),
Text(' merge it here'),
SizedBox(height: 10),
Expanded(
child: buildGridView(),
),
RaisedButton(
textColor: Colors.white,
color: Colors.orange,
child: Text("Finish",
style: TextStyle(fontSize: 15),),
onPressed: () {
pasimage();
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(8.0),
),
),
],
),
),
);
}
Widget buildGridView() {
return GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
childAspectRatio: 1,
children: List.generate(images.length, (index) {
if (images[index] is ImageUploadModel) {
ImageUploadModel uploadModel = images[index];
return Card(
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
Image.file(
uploadModel.imageFile,
width: 300,
height: 300,
),
Positioned(
right: 5,
top: 5,
child: InkWell(
child: Icon(
Icons.remove_circle,
size: 20,
color: Colors.red,
),
onTap: () {
setState(() {
images.replaceRange(index, index + 1, ['Add Image']);
});
},
),
),
],
),
);
} else {
return Card(
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
//popup
showDialog(
context: context,
builder: (context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
elevation: 16,
child: Container(
height: 180.0,
width: 330.0,
child: ListView(
children: <Widget>[
SizedBox(height: 20),
//Center(
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Text(
"Add a Receipt",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
// ),
SizedBox(height: 20),
FlatButton(
child: Text(
'Take a photo..',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 20),
),
onPressed: () {
_onAddImageClick(index,ImageSource.camera);
Navigator.of(context).pop();
// picker.getImage(ImageSource.camera);
},
textColor: Colors.black,
),
FlatButton(
child: Text(
'Choose from Library..',
style: TextStyle(fontSize: 20),
textAlign: TextAlign.left,
),
onPressed: () {
_onAddImageClick(index,ImageSource.gallery);
Navigator.of(context).pop();
},
textColor: Colors.black,
),
],
),
),
);
},
);
//pop ends
},
),
);
}
}),
);
}
Future _onAddImageClick(int index, ImageSource source ) async {
setState(() {
_inProcess = true;
});
File image = await ImagePicker.pickImage(source: source);
if(image != null){
File cropped = await ImageCropper.cropImage(
sourcePath: image.path,
maxWidth: 1080,
maxHeight: 1080,
compressFormat: ImageCompressFormat.jpg,
androidUiSettings: AndroidUiSettings(
toolbarColor: Colors.black,
toolbarWidgetColor: Colors.white,
//toolbarTitle: "RPS Cropper",
statusBarColor: Colors.deepOrange.shade900,
backgroundColor: Colors.black,
initAspectRatio: CropAspectRatioPreset.original,
lockAspectRatio: false
),
iosUiSettings: IOSUiSettings(
minimumAspectRatio: 1.0,
)
);
this.setState((){
_selectedFile = cropped ;
_inProcess = false;
});
} else {
this.setState((){
_inProcess = false;
});
}
getFileImage(index);
}
void getFileImage(int index) async {
// var dir = await path_provider.getTemporaryDirectory();
setState(() {
ImageUploadModel imageUpload = new ImageUploadModel();
imageUpload.isUploaded = false;
imageUpload.uploading = false;
imageUpload.imageFile = _selectedFile;
imageUpload.imageUrl = '';
images.replaceRange(index, index + 1, [imageUpload]);
});
}
void pasimage(){
Navigator.pushReplacementNamed(context, '/crop',arguments: {
'imageList':ImagesMerge(
images,///required,images list
direction: Axis.vertical,///direction
backgroundColor: Colors.black26,///background color
fit: false,///scale image to fit others
),
});
}
}
class ImageUploadModel {
bool isUploaded;
bool uploading;
File imageFile;
String imageUrl;
ImageUploadModel({
this.isUploaded,
this.uploading,
this.imageFile,
this.imageUrl,
});
}
when I tap the finish button after adding the images it shows an error
The following _TypeError was thrown while handling a gesture:
type 'List' is not a subtype of type 'List'
The page just on captures the data sent from the code above and display the image.
please if anyone know why is the error and help me .
Change the images to List<Object> images = [].
i have this list
List list = [
{'id': '0', 'name': 'BMW', 'route': Bmw},
{'id': '1', 'name': 'Audi', 'route': Audi},
];
and this body
return Column(
children: list.map((name) {
return Container(
margin: EdgeInsets.all(5),
child: SizedBox(
width: double.infinity,
child: RaisedButton(
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
color: Colors.blue,
child: Text(
name,
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => route()),
);
},
),
),
);
}).toList(),
);
}
}
but not work, i need generate buttons with the name from the list and the route fro the list by clicking the button, sorry for my english xD
change
child: Text(
name,
style: TextStyle(color: Colors.white),
),
by
child: Text(
name['name'],
style: TextStyle(color: Colors.white),
),
for accessing name you have to use name['name'] field to access from map
and for navigation you can use NamedRoutes
refer this link
https://flutter.dev/docs/cookbook/navigation/named-routes
and in 'route' just set route_name you want to navigate to
and for navigation through named Routes use
Navigator.pushNamed(context, name['route']);