In ExpansionPanelList, I have a problem of rebuilding widget when I expand/collapse it.
The problem is here:
expansionCallback: (int index, bool isExpanded) {
setState(() {
_profileExpansionStateMap[_profileExpansionStateMap.keys.toList()[index]] = !isExpanded;
});
},
I changed it to use Bloc state management to solve, but that has same behavior with setState(). Is there any way to avoid rebuilding widget tree? I can't use Selector widget as I don't think it would help me here.
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: Home(),));
class Home extends StatefulWidget {
#override
State<StatefulWidget> createState() =>HomeState();
}
class HomeState extends State<Home> {
Map<String, bool> _profileExpansionStateMap = Map<String, bool>();
#override
void initState() {
super.initState();
_profileExpansionStateMap = {
"UserInformation": false,
"UserWeight": false,
"UserGeneralInformation": false,
};
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('ExpansionPanel')),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(20.0),
child:ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_profileExpansionStateMap[_profileExpansionStateMap.keys.toList()[index]] = !isExpanded;
});
},
children: <ExpansionPanel>[
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
height: 80.0,
child: Text('aaaaaaaa'),
);
},
body: Container(child:Text('aaaaaaaa')),
isExpanded: _profileExpansionStateMap["UserInformation"]),
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
height: 80.0,
child: Text('bbbbbbbbbbbb'),
);
},
body: Container(child:Text('bbbbbbbbbbbb')),
isExpanded: _profileExpansionStateMap["UserWeight"]),
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
height: 80.0,
child: Text('ccccccccc'),
);
},
body: Container(child:Text('ccccccccc')),
isExpanded: _profileExpansionStateMap["UserGeneralInformation"]),
],
)
),
),
);
}
}
ExpansionPanelList.expansionCallback(...) is a method that gets called whenever you tap on arrow buttons inside your ExpansionPanelList to expand/collapse it.
In this method you are actually supposed to setup your bool values passed to isExpanded of ExpansionPanel thus requiring you to call setState(...).
If you, however, have issues with this, then it clearly indicates there is something wrong with your code. So, there is no need to avoid rebuilding the widget state.
Related
I read the questions that were asked in this regard, but I did not get an answer or I made a mistake somewhere
According to the code I have, when clicking on each panel, the panels that were already open are not closed. And this is because I use one variable for all of them
How can this be solved?
bool isExpanded = false;
ListView.builder(
itemBuilder: (context, index) {
return Column(
children: [
ExpansionPanelList(
expansionCallback: (panelIndex, isExpanded) {
setState(() {
isExpandeder = !isExpanded;
});
},
children: [
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return Row(
children: [
Text("Header"),
const Spacer(),
Text("username")
],
);
},
body: Column(
children: [
Text(
_signals![index].pair.toString(),
),
],
),
isExpanded: isExpanded,
),
],
)
],
);
},
itemCount: _signals!.length,
),
You don't need to have a list of bool values to store expanded values since you have only one value maximum. You can store index of currently expanded tile.
In your ListView you actually create multiple ExpansionPanelLists with one element each, instead of one list with all of them. You don't need a ListView at all.
You can try the following code in Dartpad, it does what you want.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State<MyApp> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
var content = ['text', 'more text', 'another text', 'random text'];
int? expandedItemIndex;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: ExpansionPanelList(
expansionCallback: (panelIndex, isExpanded) {
setState(() {
if (!isExpanded) {
expandedItemIndex = panelIndex;
} else {
expandedItemIndex = null;
}
});
},
children: [
for (var i = 0; i < content.length; i++)
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return Text("Header $i");
},
body: Text(content[i]),
isExpanded: expandedItemIndex == i,
),
],
),
),
),
);
}
}
And this is because I use one variable for all of them How can this be
solved?
You already answered your question. You need a List of booleans or you add a isExpanded boolean in your signals object. If you have only variable, all the ExpansionPanels will behave the same.
You could do something like this:
List<bool> isExpanded = [];
for(int i = 0; i < _signals.length; i++){
isExpanded.add(false);
}
So every expanded panel is collapsed at first time.
Now in your ExpansionPanel you just read the bool at position index:
isExpanded: isExpanded[index],
And to switch your expansion panel state just invert the bool at the position in the isExpanded list:
expansionCallback: (panelIndex, isExpanded) {
setState(() {
isExpanded[index] = !isExpanded[index];
});
},
The below code does not display any data when the bottomsheet loads. Once the bottomsheet is loaded if I do a save operation on the code editor it loads the data. What am I missing here?
I have a bottomsheet widget which is invoked using a button.
_showBottomSheet() {
showModalBottomSheet(
context: context,
builder: (context) {
return const Contacts();
},
);
}
The above code loads up the Contacts widget that has a Listview.builder in it which is below.
class Contacts extends StatefulWidget {
const Contacts({Key? key}) : super(key: key);
#override
_ContactsState createState() => _ContactsState();
}
class _ContactsState extends State<Contacts> {
List<PhoneBookContact> phoneBookContacts1 = [];
List<PhoneBookContact> phoneBookContacts2 = [];
#override
void initState() {
loadContacts();
super.initState();
}
Future loadContacts() async {
///somecode to gather data for the listview builder
///populates the phoneBookContacts1 & phoneBookContacts2 lists
}
#override
Widget build(BuildContext context) {
return Column(children: [
const Text('Contacts Set 1'),
displayPhoneBookContacts(phoneBookContacts1),
const Text('Contacts Set 2'),
displayPhoneBookContacts(phoneBookContacts2),
]);
}
Widget displayPhoneBookContacts(phoneBookContacts) {
return Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: phoneBookContacts.length,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: const EdgeInsets.all(10),
child: ListTile(
contentPadding: const EdgeInsets.all(10),
title: Column(
children: [
Text(phoneBookContacts[index].phoneBookContact.toString()),
const SizedBox(
height: 20,
),
ListView.separated(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: phoneBookContacts[index].contactNumbers!.length,
separatorBuilder: (BuildContext context, int index) =>
const Divider(),
itemBuilder: (BuildContext context, int phoneIndex) {
return InkWell(
onTap: () {},
child: Row(
children: [
Text(phoneBookContacts[index]
.contactNumbers![phoneIndex]
.phone),
],
),
);
},
),
],
),
),
);
},
),
);
}
}
I don't prefer using FutureBuilder inside StatefulWidget., it will recall the API(future) on every setState. As for comment it is missing setState after initializing the data.
#override
void initState() {
super.initState();
loadContacts();
}
Future loadContacts() async {
///somecode to gather data for the listview builder
///populates the phoneBookContacts1 & phoneBookContacts2
if(mounted){
// if widget build then setState call.if not we don't need to call setState
// for every initstate data loading, we have to ensure it if widget is build or not. most of the case user close screen when data loading, then error happens
setState(() {});// make sure to call setState
}
}
Because function initState() don't await your loadContacts(), data loaded after function build().
You need use FutureBuilder class to rebuild ListView widget after load data
Example:
FutureBuilder(
future: loadContacts(),
builder:(context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else {
return Container(
child: ListView.builder(
itemCount: _faouriteList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Text('${_faouriteList[index].title}');
}
)
);
}
}
)
I am trying to retrieve data from API, that's works nice.
After that I want to show my data in a ExpansionPanelList, which is builded by a method:
class _CartaPageState extends State<CartaPage> {
#override
Widget build(BuildContext context) {
// Nos suscribimos al provider
final productoService = Provider.of<ProductoService>(context);
final List<Producto> productos = productoService.productos;
_productosItems = productosToItem(productos);
return Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
child: ListView(
children: [
ExpansionPanelList(
animationDuration: Duration(milliseconds: 300),
expansionCallback: (int index, bool isExpanded) {
setState(() {
_productosItems[index].isExpanded = !isExpanded;
//productosItems[index].isExpanded = !productosItems[index].isExpanded;
});
},
//children: productosToItem(productoService.entrantes).map<ExpansionPanel>((Item item) {
children: _productosItems.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (context, isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
................
The data is shown perfect, but the state is not refreshing on my ItemModel, I think the problem is because the widget is redrawing each time I touch the panel list, that retrieve (again) data from the API and never changes the state.
How can I resolve it?
Thank you in advance
EDIT: CartaPage is wraped by:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => ProductoService()),
],
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Material App',
home: CartaPage()
),
);
}
}
EDIT 2:
I agree I am losing state, this it the method to convert Product to Item:
List<Item> productosToItem(List<Producto> productos) {
return List.generate(productos.length, (index) {
return Item(
headerValue: productos[index].tipo,
expandedValue: productos[index].nombre,
);
});
}
Is ExpansionPanel having its isExpanded set to item.isExpanded?
You get your isExpanded state from whatever productosToItem() generates.
When you call setState you queue a new build, which will call productosToItem() again. Without knowing what that method does, I cannot help much.
I would suggest you look into productosToItem and why it isn't setting isExpanded to the correct value.
If _productosItems[index].isExpanded isn't a setter, I would imagine you are losing the state.
EDIT 1:
You can create an internal state list that can persist the expanded state:
class Item {
Item({
this.expandedValue,
this.headerValue,
this.producto,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
Producto producto; // <------------- ADDED
bool isExpanded;
}
class _CartaPageState extends State<CartaPage> {
Map<Producto, bool> expanded = {}; // <------------- ADDED
#override
Widget build(BuildContext context) {
// Nos suscribimos al provider
final productoService = Provider.of<ProductoService>(context);
final List<Producto> productos = productoService.productos;
// NOTE: ----------- converted to a local variable
final _productosItems = productosToItem(productos);
return Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
child: ListView(
children: [
ExpansionPanelList(
key: ValueKey(productos.length), // <------------- ADDED
animationDuration: Duration(milliseconds: 300),
expansionCallback: (int index, bool isExpanded) {
// NOTE: ----------- updated
final producto = productos[index];
setState(() {
expanded[producto] = !isExpanded;
});
},
children: _productosItems.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
isExpanded: expanded[item.producto], // <------------- ADDED
canTapOnHeader: true,
headerBuilder: (context, isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
),
);
}).toList(),
),
],
),
),
);
}
List<Item> productosToItem(List<Producto> productos) {
// keep a list of previous map
final toRemove = Map<Producto, bool>.from(expanded);
final items = List.generate(productos.length, (index) {
final producto = productos[index];
// set initial expanded state
expanded.putIfAbsent(producto, () => false);
// the item will be retained
toRemove.remove(producto);
return Item(
headerValue: producto.tipo,
expandedValue: producto.nombre,
producto: producto,
isExpanded: expanded[producto],
);
});
if (toRemove.isNotEmpty) {
// cleanup unused items
expanded.removeWhere((key, _) => toRemove.containsKey(key));
}
return items;
}
}
The key: ValueKey(productos.length), is needed, since ExpansionPanelList acted weirdly with magically appearing or disappearing items.
I want to render the position of a RichText built by a FutureBuilder as the code below, I used the WidgetsBinding.instance.addPostFrameCallback in the initState() but I got an error: The method 'findRenderObject' was called on null., I tried this approach without FutureBuilder works fine, I do not know how to solve this with FutureBuilder
class BookScreen extends StatefulWidget {
int bookId;
BookScreen(this.bookId);
#override
_BookScreenState createState() => _BookScreenState();
}
class _BookScreenState extends State<BookScreen> {
final GlobalKey _itemKey = GlobalKey();
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {findRichText();});
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: Provider.of<Book>(context, listen: false)
.getBookDetail(widget.bookId),
builder: (ctx, snapshot) => snapshot.connectionState == ConnectionState.waiting
? Center(
child: CircularProgressIndicator(),
)
: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: RichText(
key: _itemKey, // Here is the global key
text: TextSpan(
children: _getTextSpan(snapshot.data),
),
),
),
],
),
);
void findRichText() {
var richText = _itemKey.currentContext.findRenderObject() as RenderParagraph;
print(richText.localToGlobal(Offset.zero));
}
It is possible to query the text position after it renders.
For example, you can move ListView to a separate widget. When postframe callback is called, the text will already exist so you'll get its position
class _BookScreenState extends State<BookScreen> {
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: ...,
builder: (ctx, snapshot) =>
snapshot.connectionState == ConnectionState.waiting
? Center(child: CircularProgressIndicator())
: BooksList(data: snapshot.data),
);
}
}
class BooksList extends StatefulWidget {
final BooksListData data;
BooksList({#required this.data});
#override
_BooksListState createState() => _BooksListState();
}
class _BooksListState extends State<BooksList> {
final GlobalKey _itemKey = GlobalKey();
#override
Widget build(BuildContext context) {
return ListView(
children: [
RichText(
key: _itemKey,
text: TextSpan(
children: _getTextSpan(widget.data),
),
),
],
);
}
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
findRichText();
});
}
void findRichText() {
var richText = _itemKey.currentContext.findRenderObject() as RenderParagraph;
print(richText.localToGlobal(Offset.zero));
}
}
However this approach complicates the code and doesn't seem reliable.
Alternatively, if you want scrolling to listview item, you can use scrollable_positioned_list package. It provides more declarative api:
final ItemScrollController itemScrollController = ItemScrollController();
ScrollablePositionedList.builder(
itemCount: ...,
itemBuilder: (context, index) => ...,
itemScrollController: itemScrollController,
);
itemScrollController.jumpTo(
index: 100,
alignment: 0.5,
);
I am trying to learn checkboxes in Flutter.
The problem is, when I want to use checkboxes in Scaffold(body:) it is working. But I want to use it in different places like an item in ListView.
return Center(
child: Checkbox(
value: testValue,
onChanged: (bool value) {
setState() {
testValue = value;
}
},
));
But it is not working, updating and changing anything.
Edit: I solved my problem with putting checkbox in a StatefulBuilder. Thanks to #cristianbregant
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Center(
child: CheckboxListTile(
title: const Text('Animate Slowly'),
value: _valueCheck,
onChanged: (bool value) {
setState(() {
_valueCheck = value;
});
},
secondary: const Icon(Icons.hourglass_empty),
),
);
});
Try these maybe:
return Center(
child: CheckboxListTile(
title: const Text('Animate Slowly'),
value: _valueCheck,
onChanged: (bool value) {
setState(() {
_valueCheck = value;
});
},
secondary: const Icon(Icons.hourglass_empty),
),
);
and remember that if you are using it in a dialog or bottomsheet you need to wrap the Checkbox Widget in a Stateful builder because the state does not update.
Checkboxes require you have a Scaffold or Material as their parent. Without either of these, you get this helpful error message:
The following assertion was thrown building Checkbox(dirty, state: _CheckboxState#1163b):
No Material widget found.
Checkbox widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material.
In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.
Once you have a material ancestor, you can place the ListView as it's child and it should show fine:
class SettingsPage extends StatefulWidget {
#override
_SettingsPageState createState() => _SettingsPageState();
}
class _SettingsPageState extends State<SettingsPage> {
var _foo = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Toggle Foo'),
Checkbox(
value: _foo,
onChanged: (bool value) {
setState(() => _foo = value);
},
),
],
),
],
),
);
}
}
Seems like you will have to use both initState and dispose.
See my code example below:
class SettingsOrder extends StatefulWidget {
#override
_SettingsOrderState createState() => _SettingsOrderState();
}
class _SettingsOrderState extends State<SettingsOrder> {
List options = [];
List<bool> newoptions = [];
int selectedoption;
bool checkedstatus;
bool initialcall;
Future getproductlist(selectedoption, checkedstatus, initialcall) async{
List updatedlist = [];
final arguments = ModalRoute.of(context).settings.arguments as Map;
int itempos = 0;
options.clear();
if(initialcall == false){
for(var item in arguments['options']){
updatedlist.add({
'checkbox' : newoptions[itempos]
});
itempos++;
}
} else {
for(var item in arguments['options']){
updatedlist.add({
'checkbox' : checkedstatus
});
newoptions.add(false);
itempos++;
}
}
setState(() {
options = updatedlist;
});
}
#override
void initState(){
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
getproductlist(0, false, true);
return Scaffold(
body: SingleChildScrollView(
child: Container(
width: double.infinity,
child: ListView.builder(
primary: false,
shrinkWrap: true,
itemCount: options.length,
itemBuilder: (BuildContext context, int index){
return Container(
child: Theme(
data: ThemeData(
unselectedWidgetColor: Colors.grey
),
child: CheckboxListTile(
controlAffinity: ListTileControlAffinity.trailing,
title: Text(options[index]['name']),
value: options[index]['checkbox'],
onChanged: (newvalue){
int indexposition = index;
newoptions.removeAt(indexposition);
newoptions.insert(indexposition, newvalue);
getproductlist(indexposition, newvalue, false);
},
activeColor: Color.fromRGBO(0, 130, 214, 1),
checkColor: Colors.white,
),
),
);
}
),
),
),
);
}