How to use indexwhere

How to use indexwhere - android

class SearchBar extends SearchDelegate {
final TumUrunlerDeneme _tumUrunlerDeneme = TumUrunlerDeneme();
#override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {
query = '';
},
icon: const Icon(Icons.close))
];
}
#override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: const Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
);
}
#override
Widget buildResults(BuildContext context) {
return FutureBuilder<List<Products>>(
future: _tumUrunlerDeneme.getuserList(query: query),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(
child: CircularProgressIndicator(),
);
}
List<Products> ?data = snapshot.data;
return ListView.builder(
shrinkWrap: true,
//physics: const NeverScrollableScrollPhysics(),
itemCount: data!.length,
itemBuilder: (context, index) {
return Column(
children: [
Flex(
direction: Axis.vertical,
children:[ SingleChildScrollView(
scrollDirection: Axis.vertical,
child: GestureDetector(
onTap: () {
Get.toNamed(RouteHelper.getAllProduct(index));
},
child: Container(
margin: EdgeInsets.only(
left: Dimensions.width20,
right: Dimensions.width10,
bottom: Dimensions.height15),
child: Row(
children: [
//image section
Container(
width: Dimensions.listViewImgSize,
height: Dimensions.listViewImgSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
Dimensions.radius20),
color: Colors.white38,
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
AppConstans.BASE_URL +
AppConstans.UPLOAD_URL +
data[index]
.img!))),
),
//text section
Expanded(
child: Container(
height: Dimensions.listViewTextContSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
Dimensions.radius20),
bottomRight: Radius.circular(
Dimensions.radius20)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.only(
left: Dimensions.width10,
right: Dimensions.width10),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
BigText(
text: data[index].name!,
),
SizedBox(
height: Dimensions.height10,
),
ExpandableProductText(
text: data[index]
.description!),
SizedBox(
height: Dimensions.height10,
),
],
),
),
),
)
],
)),
),
),
]),
],
);
});
});
}
#override
Widget buildSuggestions(BuildContext context) {
return const Center(
child: Text('Ürün Arama'),
);
}
}
Here is detail page :
class AllProductDetail extends StatelessWidget {
final int pageId;
const AllProductDetail({Key? key, required this.pageId}) : super(key: key);
#override
Widget build(BuildContext context) {
var product = Get.find<TumUrunlerController>().tumUrunlerList[pageId];
return Scaffold(
backgroundColor: Colors.white,
body: CustomScrollView(
slivers: [
SliverAppBar(
automaticallyImplyLeading: false,
toolbarHeight: 70,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(onTap: (){
Navigator.of(context).pop(context);
}
,child: const AppIcon(icon: Icons.arrow_back_ios),
),
],
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(20),
child: Container(
child: Center(
child: BigText(
text: product.name!,
size: Dimensions.font20,
)),
width: double.maxFinite,
padding: const EdgeInsets.only(top: 0, bottom: 0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(Dimensions.radius20),
topRight: Radius.circular(Dimensions.radius20))),
),
),
backgroundColor: Colors.white,
pinned: true,
expandedHeight: Dimensions.imgsize,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
AppConstans.BASE_URL+AppConstans.UPLOAD_URL+product.img!,
width: double.maxFinite,
fit: BoxFit.fitWidth,
),
),
),
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: ExpandableText(
text: product.description!
),
margin: EdgeInsets.only(
left: Dimensions.width20, right: Dimensions.width20),
),
],
),
)
],
),
);
}
}
here is Controller page:
class TumUrunlerDeneme {
late var data = [];
List<Products> results= [];
String urlList = 'http://mzpdata.com/api/v1/products/allproduct';
Future<List<Products>> getuserList({String? query}) async {
var url = Uri.parse("http://mzpdata.com/api/v1/products/allproduct");
print("got TumUrunlerDeneme 1");
try {
http.Response response = await http.get(url);
if (response.statusCode == 200) {
print("got TumUrunlerDeneme 2");
data = json.decode(response.body)['products'];
print("got TumUrunlerDeneme 3");
results = data.map((e) => Products.fromJson(e)).toList();
print("got TumUrunlerDeneme 4");
if (query != null) {
results = results
.where((element) =>
element.name!.toLowerCase().contains((query.toLowerCase())))
.toList();
print("got TumUrunlerDeneme 5");
}
} else {
print("fetch error");
}
} on Exception catch (e) {
print('error: $e');
}
return results;
}
}
No matter what I search for, the detail opens according to the product order in the whole list.
When I click on the product I am looking for, I reach the details of another product.
How can I search for the product I want and find the details of the product I am looking for?
I appreciate your help.

Related

how to flutter getx make a 13 different controller with search function

class IlacProductController extends GetxController {
final IlacProductRepo ilacProductRepo;
IlacProductController({required this.ilacProductRepo});
List<dynamic> _ilacproductList = [];
List<dynamic> get ilacproductList => _ilacproductList;
bool _isLoaded = false;
bool get isLoaded => _isLoaded ;
Future<void> getIlacProductList() async {
Response response = await ilacProductRepo.getIlacProductList();
if (response.statusCode == 200) {
print("got ilaç");
_ilacproductList = [];
_ilacproductList.addAll(Product.fromJson(response.body).products);
_isLoaded=true;
update();
} else {return print("something wrong");}
}
}
I have 13 different controller codes similar to the above code, each representing a different category
#override
Widget buildResults(BuildContext context) {
return GetBuilder<HalkSagligiProductController>(builder: (allProduct) {
return allProduct.isLoaded
? ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: allProduct.halksagligiproductList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Get.toNamed(RouteHelper.getHalkProduct(index));
},
child: Container(
margin: EdgeInsets.only(
left: Dimensions.width20,
right: Dimensions.width10,
bottom: Dimensions.height15),
child: Row(
children: [
//image section
Container(
width: Dimensions.listViewImgSize,
height: Dimensions.listViewImgSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
Dimensions.radius20),
color: Colors.white38,
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(AppConstans
.BASE_URL +
AppConstans.UPLOAD_URL +
allProduct
.halksagligiproductList[index]
.img!))),
),
//text section
Expanded(
child: Container(
height: Dimensions.listViewTextContSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
Dimensions.radius20),
bottomRight: Radius.circular(
Dimensions.radius20)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.only(
left: Dimensions.width10,
right: Dimensions.width10),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
BigText(
text: allProduct
.halksagligiproductList[index]
.name!,
),
SizedBox(
height: Dimensions.height10,
),
ExpandableProductText(
text: allProduct
.halksagligiproductList[index]
.description!),
SizedBox(
height: Dimensions.height10,
),
],
),
),
),
)
],
)),
);
})
: const CircularProgressIndicator(
color: AppColor.mainColor,
);
});
}
In the above code, I am pulling the image name and description with getx.
My question is: How can I search 13 different controllers with Getx, both by name and by the words in the description, on the search screen?

final searchController = Get.find<SearchController>();
You can use multiple time, this function in different screens.

Declare final ilacProductController = Get.put(IlacProductController());
into the screen and use object ilacProductController for access.

Flutter item builder not treating duplicates as different items

I am making a flutter game where I have made a virtual keyboard using item builder and the keyboard contains some characters and these characters can be duplicate, when i select any character it is showed in containers above keyboard.
The problem is when I select any particular character, its duplicates are also selected but I want to treat duplicates as different. Refer image below
I think this is happening due to list.contains I used in my code, check the code below
import 'package:flutter/material.dart';
class PuzzlePage extends StatefulWidget {
int? id;
String? image1;
String? image2;
String? puzzleAnswer;
PuzzlePage(this.id, this.image1, this.image2, this.puzzleAnswer);
State<StatefulWidget> createState()
{
return _PuzzlePageState(this.id,this.image1,this.image2,this.puzzleAnswer);
}
//State<StatefulWidget> createState() {
// return _PuzzlePageState(this.id,this.image1,this.image2,this.puzzleAnswer);
}
class _PuzzlePageState extends State<PuzzlePage> {
int? id;
String? image1;
String? image2;
String? puzzleAnswer;
String? randomCharactersString="";
List selection=[];
_PuzzlePageState(this.id,this.image1,this.image2,this.puzzleAnswer);
void initState(){
super.initState();
}
#override
Widget build(BuildContext context) {
// deciding keyboard size
int? remainingLetters=26-(puzzleAnswer!.length);
int extraSize=(remainingLetters/2).ceil();
// print(extraSize);
// print(puzzleAnswer!.length);
int keyboardSize=puzzleAnswer!.length+extraSize;
if(randomCharactersString==""){
randomCharactersString = RandomString(extraSize, puzzleAnswer!);
}
String keyboardWords=randomCharactersString!+puzzleAnswer!;
// print(randomCharactersString);
print(selection);
// const answer= "cde";
//final id = ModalRoute.of(context)!.settings.arguments as Id ;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title:Text("Guess the answer"),
centerTitle: true,
automaticallyImplyLeading: true,
leading: IconButton(icon:Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Container(
color: Colors.white54,
child: Column(
children: [
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 125,
width: 125,
child: Image(image: AssetImage("assets/images/$image1"))),
SizedBox(
width: 20,
),
Text("$randomCharactersString"),
Container(
height: 125,
width: 125,
child: Image(image: AssetImage("assets/images/$image2"))),
], ),
Column(
children: [
Container(
height: 250,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
child: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// childAspectRatio: 1,
crossAxisCount: 7,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: puzzleAnswer!.length,
shrinkWrap: true,
itemBuilder: (context , index){
print(index);
if(selection.length>index){
return InkWell(
onTap: () {
setState(() {
if (!selection.contains(keyboardWords[index])){
null;
}
else{
selection.remove(keyboardWords[index]);
}
});
},
child: Container(
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color:Colors.blue,
borderRadius: BorderRadius.circular(7)
),
child: Text(selection[index],
style: TextStyle(color: Colors.black)
),
),
);
}
else{
return Container(
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(7)
),
child: Text("",
style: TextStyle(color: Colors.black)
),
);
}
}
)
),
],
),
Expanded(child:
Container(
// height: 300,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
child: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisCount: 7,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: keyboardSize,
// shrinkWrap: true,
itemBuilder: (context , index)
{
return InkWell(
onTap:(){
setState(() {
if (!selection.contains(keyboardWords[index])){
selection.add(keyboardWords[index]);
}
else{
selection.remove(keyboardWords[index]);
}
}
);
},
child: Container(
padding:EdgeInsets.all(10),
alignment:Alignment.center,
decoration:BoxDecoration(
color:selection.contains(keyboardWords[index])?Colors.blueAccent:Colors.grey,
borderRadius:BorderRadius.circular(7)
),
child:Text(keyboardWords[index],
style:TextStyle(color:Colors.black)
),
),
);
// return ElevatedButton(
// style: ElevatedButton.styleFrom(
// primary: Colors.purple,
// // padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
// textStyle: TextStyle(
// fontSize: 20,
// fontWeight: FontWeight.bold
// ),
// ),
// onPressed: null,
// child: Text("d"),
// );
}
)
),
),
],
),
),
),
);
}
}
RandomString(int strlen,String puzzleAnswer){
Random rnd = new Random();
String result = "";
const chars = "abcdefghijklmnopqrstuvwxyz";
for (var i = 0; i < strlen; i++) {
// if (!puzzleAnswer.contains(chars[i])) {
result += chars[rnd.nextInt(chars.length)];
// }
}
return result;
}

Here is the modified file, here it does not highlight the duplicates:
import 'dart:math';
import 'package:flutter/material.dart';
class PuzzlePage extends StatefulWidget {
int? id;
String? image1;
String? image2;
String? puzzleAnswer;
PuzzlePage(this.id, this.image1, this.image2, this.puzzleAnswer);
State<StatefulWidget> createState()
{
return _PuzzlePageState(this.id,this.image1,this.image2,this.puzzleAnswer);
}
//State<StatefulWidget> createState() {
// return _PuzzlePageState(this.id,this.image1,this.image2,this.puzzleAnswer);
}
class _PuzzlePageState extends State<PuzzlePage> {
int? id;
String? image1;
String? image2;
String? puzzleAnswer;
String? randomCharactersString="";
List<int> selection=[];
_PuzzlePageState(this.id,this.image1,this.image2,this.puzzleAnswer);
void initState(){
super.initState();
}
#override
Widget build(BuildContext context) {
// deciding keyboard size
int? remainingLetters=26-(puzzleAnswer!.length);
int extraSize=(remainingLetters/2).ceil();
// print(extraSize);
// print(puzzleAnswer!.length);
int keyboardSize=puzzleAnswer!.length+extraSize;
if(randomCharactersString==""){
randomCharactersString = RandomString(extraSize, puzzleAnswer!);
}
String keyboardWords=randomCharactersString!+puzzleAnswer!;
// print(randomCharactersString);
print(selection);
// const answer= "cde";
//final id = ModalRoute.of(context)!.settings.arguments as Id ;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title:Text("Guess the answer"),
centerTitle: true,
automaticallyImplyLeading: true,
leading: IconButton(icon:Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Container(
color: Colors.white54,
child: Column(
children: [
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 125,
width: 125,
child: Image(image: AssetImage("assets/images/$image1"))),
SizedBox(
width: 20,
),
Text("$randomCharactersString"),
Container(
height: 125,
width: 125,
child: Image(image: AssetImage("assets/images/$image2"))),
], ),
Column(
children: [
Container(
height: 250,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
child: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// childAspectRatio: 1,
crossAxisCount: 7,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: puzzleAnswer!.length,
shrinkWrap: true,
itemBuilder: (context , index){
print(index);
if(selection.length>index){
return InkWell(
onTap: () {
setState(() {
if (!selection.contains(index)){
null;
}
else{
selection.remove(index);
}
});
},
child: Container(
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color:Colors.blue,
borderRadius: BorderRadius.circular(7)
),
child: Text("${selection[index]}",
style: TextStyle(color: Colors.black)
),
),
);
}
else{
return Container(
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(7)
),
child: Text("",
style: TextStyle(color: Colors.black)
),
);
}
}
)
),
],
),
Expanded(child:
Container(
// height: 300,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
child: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisCount: 7,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: keyboardSize,
// shrinkWrap: true,
itemBuilder: (context , index)
{
return InkWell(
onTap:(){
setState(() {
if (!selection.contains(index)){
selection.add(index);
}
else{
selection.remove(index);
}
}
);
},
child: Container(
padding:EdgeInsets.all(10),
alignment:Alignment.center,
decoration:BoxDecoration(
color:selection.contains(index)?Colors.blueAccent:Colors.grey,
borderRadius:BorderRadius.circular(7)
),
child: Text("${keyboardWords[selection[index]]}",
style:TextStyle(color:Colors.black)
),
),
);
// return ElevatedButton(
// style: ElevatedButton.styleFrom(
// primary: Colors.purple,
// // padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
// textStyle: TextStyle(
// fontSize: 20,
// fontWeight: FontWeight.bold
// ),
// ),
// onPressed: null,
// child: Text("d"),
// );
}
)
),
),
],
),
),
),
);
}
}
RandomString(int strlen,String puzzleAnswer){
Random rnd = new Random();
String result = "";
const chars = "abcdefghijklmnopqrstuvwxyz";
for (var i = 0; i < strlen; i++) {
// if (!puzzleAnswer.contains(chars[i])) {
result += chars[rnd.nextInt(chars.length)];
// }
}
return result;
}

FutureBuilder inside `onPressed` does not update the UI

I am developing a login form with flutter. When the user click on submit button it will connect with Firebase Auth to see credentials and sign in the user. Until that process i NEED TO show the user a CircularProgressBar. To see whether the sign in process is complete or not, I am using FutureBuilder. Below is my code
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
class LoginPage extends StatelessWidget {
LoginPage() {}
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(11, 51, 83, 90),
Color.fromRGBO(4, 18, 30, 1)
])),
child: LoginForm()),
);
}
}
class LoginForm extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return LoginFormState();
}
}
class LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
final FirebaseAuth _auth = FirebaseAuth.instance;
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
#override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: <Widget>[
Container(
child: _buildLogo(),
margin:
EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.20),
),
Container(
child: _buildForm(),
margin: EdgeInsets.only(left: 10, right: 10, top: 83),
)
],
);
}
Widget _buildLogo() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
"assets/images/logo.png",
fit: BoxFit.fill,
)
],
);
}
Widget _buildForm() {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: Icon(
Icons.person,
color: Colors.white,
),
// child: ImageIcon(
// AssetImage("assets/images/email_24px.png"),
// color: Colors.white,
// ),
margin: EdgeInsets.only(right: 5, bottom: 10)),
),
Flexible(
flex: 7,
child: SizedBox(
height: 60,
child: TextFormField(
controller: emailController,
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email",
),
),
))
],
),
Container(
margin: EdgeInsets.only(top: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: Icon(Icons.lock, color: Colors.white),
margin: EdgeInsets.only(right: 5, bottom: 10),
),
),
Flexible(
flex: 7,
child: SizedBox(
height: 60,
child: TextFormField(
controller: passwordController,
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
))
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"Forgot Password?",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {},
),
],
),
),
Container(
margin: EdgeInsets.only(top: 40, left: 25, right: 10, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: SizedBox(
width: double.infinity,
height: 40,
child: RaisedButton(
color: Color.fromRGBO(0, 72, 128, 100),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side:
BorderSide(color: Color.fromRGBO(0, 72, 128, 100))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
FutureBuilder(
future:
Provider.of<AuthService>(context, listen: false)
.signInWithEmail(emailController.text,
passwordController.text),
builder:
(BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
Navigator.pushNamed(context, "/home");
} else {
_scaffoldKey.currentState.showSnackBar(SnackBar(
duration: Duration(seconds: 4),
content: Row(
children: <Widget>[
new CircularProgressIndicator(),
new Text(" Signing-In...")
],
),
));
}
},
);
// signInWithEmail("test#test.com","test123");
}
},
),
))
],
),
)
],
),
);
}
Future<String> signInWithEmail(String email, String password) async {
FirebaseUser user;
try {
AuthResult result = await _auth.signInWithEmailAndPassword(
email: email, password: password);
user = result.user;
if (user != null) {
print("SIgn in success: " + user.email);
} else {
print("sign in failed");
}
} catch (e) {
print(e.toString());
}
}
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
void dispose() {
emailController.dispose();
passwordController.dispose();
super.dispose();
}
}
hERE when the button is pressed i CAN see the user is signed in, but I cant see the CircularProgress or I am not directed to the home page.
Why is this?

Try the following:
FutureBuilder(
future:
Provider.of<AuthService>(context, listen: false)
.signInWithEmail(emailController.text,
passwordController.text),
builder:
(BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
Navigator.pushNamed(context, "/home");
} else {
_scaffoldKey.currentState.showSnackBar(SnackBar(
duration: Duration(seconds: 4),
content: Row(
children: <Widget>[
new CircularProgressIndicator(),
new Text(" Signing-In...")
],
),
));
}
return new CircularProgressIndicator();
},
);
outside the if else add return new CircularProgressIndicator, this should show the circular indicator at the beginning and then when the future is done it will enter the if

Flutter : How to prevent rebuild of whole Reorderable Listview?

Currently I'm using flutter package 'Reorderables' to show a reorderable listview which contains several images.These images can be deleted from listview through a button , everything works fine. But the listview rebuild everytime when I delete an image. I'm using a class called 'ReorderableListviewManager' with ChangeNotifier to update images and Provider.of<ReorderableListviewManager>(context) to get latest images . The problem now is that using Provider.of<ReorderableListviewManager>(context) makes build() called everytime I delete an image , so the listview rebuid. I koow I
can use consumer to only rebuild part of widget tree, but it seems like that there's no place to put consumer in children of this Listview. Is there a way to rebuild only image but not whole ReorderableListview ? Thanks very much!
Below is my code:
class NotePicturesEditScreen extends StatefulWidget {
final List<Page> notePictures;
final NotePicturesEditBloc bloc;
NotePicturesEditScreen({#required this.notePictures, #required this.bloc});
static Widget create(BuildContext context, List<Page> notePictures) {
return Provider<NotePicturesEditBloc>(
create: (context) => NotePicturesEditBloc(),
child: Consumer<NotePicturesEditBloc>(
builder: (context, bloc, _) =>
ChangeNotifierProvider<ReorderableListviewManager>(
create: (context) => ReorderableListviewManager(),
child: NotePicturesEditScreen(
bloc: bloc,
notePictures: notePictures,
),
)),
dispose: (context, bloc) => bloc.dispose(),
);
}
#override
_NotePicturesEditScreenState createState() => _NotePicturesEditScreenState();
}
class _NotePicturesEditScreenState extends State<NotePicturesEditScreen> {
PreloadPageController _pageController;
ScrollController _reorderableScrollController;
List<Page> notePicturesCopy;
int longPressIndex;
List<double> smallImagesWidth;
double scrollOffset = 0;
_reorderableScrollListener() {
scrollOffset = _reorderableScrollController.offset;
}
#override
void initState() {
Provider.of<ReorderableListviewManager>(context, listen: false)
.notePictures = widget.notePictures;
notePicturesCopy = widget.notePictures;
_reorderableScrollController = ScrollController();
_pageController = PreloadPageController();
_reorderableScrollController.addListener(_reorderableScrollListener);
Provider.of<ReorderableListviewManager>(context, listen: false)
.getSmallImagesWidth(notePicturesCopy, context)
.then((imagesWidth) {
smallImagesWidth = imagesWidth;
});
super.initState();
}
#override
void dispose() {
_pageController.dispose();
_reorderableScrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
ReorderableListviewManager reorderableManager =
Provider.of<ReorderableListviewManager>(context, listen: false);
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
shape: Border(bottom: BorderSide(color: Colors.black12)),
iconTheme: IconThemeData(color: Colors.black87),
elevation: 0,
automaticallyImplyLeading: false,
titleSpacing: 0,
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: IconButton(
padding: EdgeInsets.only(left: 20, right: 12),
onPressed: () => Navigator.of(context).pop(),
icon: Icon(Icons.close),
),
),
Text('編輯',
style: TextStyle(color: Colors.black87, fontSize: 18))
],
),
actions: <Widget>[
FlatButton(
onPressed: () {},
child: Text(
'下一步',
),
)
],
),
backgroundColor: Color(0xffeeeeee),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Spacer(),
StreamBuilder<List<Page>>(
initialData: widget.notePictures,
stream: widget.bloc.notePicturesStream,
builder: (context, snapshot) {
notePicturesCopy = snapshot.data;
return Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: MediaQuery.of(context).size.height * 0.65,
child: PreloadPageView.builder(
preloadPagesCount: snapshot.data.length,
controller: _pageController,
itemCount: snapshot.data.length,
onPageChanged: (index) {
reorderableManager.updateCurrentIndex(index);
reorderableManager.scrollToCenter(
smallImagesWidth,
index,
scrollOffset,
_reorderableScrollController,
context);
},
itemBuilder: (context, index) {
return Container(
child: Image.memory(
File.fromUri(
snapshot.data[index].polygon.isNotEmpty
? snapshot.data[index]
.documentPreviewImageFileUri
: snapshot.data[index]
.originalPreviewImageFileUri)
.readAsBytesSync(),
gaplessPlayback: true,
alignment: Alignment.center,
),
);
}),
);
},
),
Spacer(),
Container(
height: MediaQuery.of(context).size.height * 0.1,
margin: EdgeInsets.symmetric(horizontal: 20),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ReorderableRow(
scrollController: _reorderableScrollController,
buildDraggableFeedback: (context, constraints, __) =>
Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
child: Image.memory(File.fromUri(
notePicturesCopy[longPressIndex]
.polygon
.isNotEmpty
? notePicturesCopy[longPressIndex]
.documentPreviewImageFileUri
: notePicturesCopy[longPressIndex]
.originalPreviewImageFileUri)
.readAsBytesSync()),
),
onReorder: (oldIndex, newIndex) async {
List<Page> result = await widget.bloc.reorderPictures(
oldIndex,
newIndex,
reorderableManager.notePictures);
_pageController.jumpToPage(newIndex);
reorderableManager.updateNotePictures(result);
reorderableManager
.getSmallImagesWidth(result, context)
.then((imagesWidth) {
smallImagesWidth = imagesWidth;
});
},
footer: Container(
width: 32,
height: 32,
margin: EdgeInsets.only(left: 16),
child: SizedBox(
child: FloatingActionButton(
backgroundColor: Colors.white,
elevation: 1,
disabledElevation: 0,
highlightElevation: 1,
child: Icon(Icons.add, color: Colors.blueAccent),
onPressed: notePicturesCopy.length >= 20
? () {
Scaffold.of(context)
.showSnackBar(SnackBar(
content: Text('筆記上限為20頁 !'),
));
}
: () async {
List<Page> notePictures =
await widget.bloc.addPicture(
reorderableManager.notePictures);
List<double> imagesWidth =
await reorderableManager
.getSmallImagesWidth(
notePictures, context);
smallImagesWidth = imagesWidth;
reorderableManager.updateCurrentIndex(
notePictures.length - 1);
reorderableManager
.updateNotePictures(notePictures);
_pageController
.jumpToPage(notePictures.length - 1);
},
),
),
),
children: Provider.of<ReorderableListviewManager>(
context)
.notePictures
.asMap()
.map((index, page) {
return MapEntry(
index,
Consumer<ReorderableListviewManager>(
key: ValueKey('value$index'),
builder: (context, manager, _) =>
GestureDetector(
onTapDown: (_) {
longPressIndex = index;
},
onTap: () {
reorderableManager.scrollToCenter(
smallImagesWidth,
index,
scrollOffset,
_reorderableScrollController,
context);
_pageController.jumpToPage(index);
},
child: Container(
margin: EdgeInsets.only(
left: index == 0 ? 0 : 12),
decoration: BoxDecoration(
border: Border.all(
width: 1.5,
color: index ==
manager
.getCurrentIndex
? Colors.blueAccent
: Colors.transparent)),
child: index + 1 <=
manager.notePictures.length
? Image.memory(
File.fromUri(manager
.notePictures[
index]
.polygon
.isNotEmpty
? manager
.notePictures[
index]
.documentPreviewImageFileUri
: manager
.notePictures[
index]
.originalPreviewImageFileUri)
.readAsBytesSync(),
gaplessPlayback: true,
)
: null),
),
));
})
.values
.toList()),
)),
Spacer(),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border(top: BorderSide(color: Colors.black12))),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
onPressed: () async => await widget.bloc
.cropNotePicture(reorderableManager.notePictures,
_pageController.page.round())
.then((notePictures) {
reorderableManager.updateNotePictures(notePictures);
reorderableManager
.getSmallImagesWidth(notePictures, context)
.then((imagesWidth) {
smallImagesWidth = imagesWidth;
});
}),
child: Column(
children: <Widget>[
Icon(
Icons.crop,
color: Colors.blueAccent,
),
Container(
margin: EdgeInsets.only(top: 1),
child: Text(
'裁切',
style: TextStyle(color: Colors.blueAccent),
),
)
],
),
),
FlatButton(
onPressed: () {
int deleteIndex = _pageController.page.round();
widget.bloc
.deletePicture(
reorderableManager.notePictures, deleteIndex)
.then((notePictures) {
if (deleteIndex == notePictures.length) {
reorderableManager
.updateCurrentIndex(notePictures.length - 1);
}
reorderableManager.updateNotePictures(notePictures);
reorderableManager
.getSmallImagesWidth(notePictures, context)
.then((imagesWidth) {
smallImagesWidth = imagesWidth;
});
if (reorderableManager.notePictures.length == 0) {
Navigator.pop(context);
}
});
},
child: Column(
children: <Widget>[
Icon(
Icons.delete_outline,
color: Colors.blueAccent,
),
Container(
margin: EdgeInsets.only(top: 1),
child: Text(
'刪除',
style: TextStyle(color: Colors.blueAccent),
),
),
],
),
)
],
),
)
],
)),
);
}
}

You can't prevent a rebuild on your ReorderableListView widget because it will be rebuild every time there's an update on the Provider. What you can do here is to keep track the current index of all visible ListView items. When new data should be displayed coming from the Provider, you can retain the current indices of previous ListView items, and add the newly added items at the end of the list, or wherever you like.

Flutter update data onClick at clicked index

I am building a food cart application and have a query on the menu item page.
My menu items page consists of a list view, which shows each item with description along with an option to specify the quantity of items( 1, 2, 3....)
Now I am able to increment or decrement item count for a single item, but not sure how to do that in a list view at a particular index where the user clicks.
Could some one please help me on this?
The code which I have done till now is as below :
FutureBuilder(
future: getItemList(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
var itemList = snapshot.data;
int itemlength = itemList.length;
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 100,
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(width: 2.0, color: Colors.blueGrey),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: Color(0xFF6078ea).withOpacity(.3),
offset: Offset(0.0, 8.0),
blurRadius: 8.0),
],
),
child: Row(
children: < Widget > [
Container(
width: 75,
child: ClipRRect(
borderRadius: new BorderRadius.circular(10.0),
child: Image(
image: AssetImage(
'assets/images/loginbg3.jpg'),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.only(left: 10),
),
Expanded(
child: Container(
child: Column(
children: < Widget > [
Row(
children: < Widget > [
Expanded(child: Container(margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Text(itemList[index]['itemname'], style: kClickableTextStyle, ))),
Container(color: Colors.white, width: 25, margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Image.asset(_itemtype)),
],
),
Row(
children: < Widget > [
Container(margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Text('Price : ', style: kListTitleTextStyle, )),
Container(margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Text(numberofitems.toString() + ' \u20B9 ', style: kListTitleTextStyle, )),
],
),
],
),
),
),
Container(
margin: EdgeInsets.only(left: 10),
child: Row(
children: < Widget > [
InkWell(
onTap: onClickDelete,
child: Container(
width: 30, child: Icon(
Icons.remove_circle_outline,
color: Colors.green,
size: 30,
), ),
),
Container(
width: 30,
child: Center(child: Text(_count.toString(), style: TextStyle(fontSize: 25), )),
),
InkWell(
onTap: onClickAdd,
child: Container(
margin: EdgeInsets.only(right: 5),
width: 30, child: Icon(
Icons.add_circle_outline,
color: Colors.green,
size: 30,
), ),
),
],
),
),
],
),
);
},
itemCount: itemList == null ? 0 : itemList.length,
);
})

You can copy paste run full code below
Step 1: create Item class
Step 2: change future builder call
Step 3: deal with Inkwell onTap
working demo
code snippet
Future callback;
#override
void initState() {
callback = _getItemList();
super.initState();
}
#override
Widget build(BuildContext context) {
var futureBuilder = FutureBuilder(
future: callback,
...
InkWell(
onTap: () {
if (itemList[index].numberofitems > 0) {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems - 1;
});
}
},
...
InkWell(
onTap: () {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems + 1;
print(
' ${itemList[index].itemname.toString()} ${itemList[index].numberofitems.toString()}');
});
},
full code
import 'dart:async';
import 'dart:collection';
import 'package:flutter/material.dart';
void main() => runApp( MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class Item {
String itemname;
String itemtype;
int numberofitems;
Item({this.itemname, this.itemtype, this.numberofitems});
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future callback;
#override
void initState() {
callback = _getItemList();
super.initState();
}
#override
Widget build(BuildContext context) {
var futureBuilder = FutureBuilder(
future: callback,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else
return createListView(context, snapshot);
}
},
);
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: futureBuilder,
);
}
Future<List<Item>> _getItemList() async {
var values = List<Item>();
values.add(
Item(itemname: "A", itemtype: "assets/images/a.jpg", numberofitems: 0));
values.add(
Item(itemname: "B", itemtype: "assets/images/a.jpg", numberofitems: 1));
values.add(
Item(itemname: "C", itemtype: "assets/images/a.jpg", numberofitems: 2));
//throw Exception("Danger Will Robinson!!!");
await Future.delayed( Duration(seconds: 2));
return values;
}
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
List<Item> itemList = snapshot.data;
return ListView.builder(
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
{
return Container(
height: 100,
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(width: 2.0, color: Colors.blueGrey),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: Color(0xFF6078ea).withOpacity(.3),
offset: Offset(0.0, 8.0),
blurRadius: 8.0),
],
),
child: Row(
children: <Widget>[
Container(
width: 75,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image(
image: AssetImage('assets/images/a.jpg'),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.only(left: 10),
),
Expanded(
child: Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Text(
itemList[index].itemname,
))),
Container(
color: Colors.white,
width: 25,
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Image.asset(itemList[index].itemtype)),
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Text(
'Price : ',
)),
Container(
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Text(
itemList[index].numberofitems.toString() +
' \u20B9 ',
)),
],
),
],
),
),
),
Container(
margin: EdgeInsets.only(left: 10),
child: Row(
children: <Widget>[
InkWell(
onTap: () {
if (itemList[index].numberofitems > 0) {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems - 1;
});
}
},
child: Container(
width: 30,
child: Icon(
Icons.remove_circle_outline,
color: Colors.green,
size: 30,
),
),
),
Container(
width: 30,
child: Center(
child: Text(
itemList[index].numberofitems.toString(),
style: TextStyle(fontSize: 25),
)),
),
InkWell(
onTap: () {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems + 1;
print(
' ${itemList[index].itemname.toString()} ${itemList[index].numberofitems.toString()}');
});
},
child: Container(
margin: EdgeInsets.only(right: 5),
width: 30,
child: Icon(
Icons.add_circle_outline,
color: Colors.green,
size: 30,
),
),
),
],
),
),
],
),
);
}
;
});
}
}

you need to create list of objects for your Item like.
class Item{
String name;
String description;
int quantity;
double price;
}
and on tap of item, get index of clicked item with new incremented/decremented value and update your list of objects inside setState().

You need to wrap your itemBuilder item, i.e the Container with a GestureDetector and then call the onTap() method inside that detector.
Before that, you'll have to convert your item into a stateful widget with a variable to maintain the count of quantity.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to use indexwhere - android

Related

how to flutter getx make a 13 different controller with search function

Flutter item builder not treating duplicates as different items

FutureBuilder inside `onPressed` does not update the UI

Flutter : How to prevent rebuild of whole Reorderable Listview?

Flutter update data onClick at clicked index

Categories

Resources