how to list dynamically radiobuttons contained in listTiles in flutter? - flutter

i would like to show a list of radiobuttons? this radiobuttons are contained in ListTile widget, i tried some code but nothing appears :
when i put a single radiobutton , this appears but when i put a listview nothing appears on the page including others widgets
Widget build(BuildContext context) {
return StoreConnector<MMpataState, MMpataViewModel>(
converter: MMpataViewModel.convertStateToViewModel,
builder: (BuildContext context, MMpataViewModel vm) {
// print(vm.state.subscriptions2);
if (vm.state.isSubscriptions2loaded &&
vm.state.subscriptions2.length < 1) {
return Scaffold(
appBar: AppBar(
title: Text("Aucune donnée"),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text(
"Nous n'avons trouvé aucune souscription pour le produit
sélectionné.",
),
),
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(!vm.state.isSubscriptions2loaded ? "Chargement ... " :
vm.state.subscriptions2[0].product.libelle),
),
body: MMpataLoader(
inAsyncCall: _isLoading || !vm.state.isSubscriptions2loaded,
child:
Column(
children: <Widget>[
Form(
child: new Container(
color: Color(0xffFFFFFF),
child:
Column( crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget> [
Padding(padding:EdgeInsets.fromLTRB(25.0, 0.0,
0.0, 0.0),
child: Column(crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget> [
Text(""),
Text(vm.state.subscriptions2[0].product.libelle,
textAlign:TextAlign.left,style:TextStyle()),
Text(vm.state.subscriptions2[0].product.description,
textAlign: TextAlign.left),
Expanded(
child: ListView.builder(shrinkWrap:true,
itemCount: vm.state.subscriptions2.length,
itemBuilder: (context, index) {
return RadioListTile<double>(
title:Text(
"${vm.state.subscriptions2[index].quota.libelle}
(${vm.state.subscriptions2[index].amount} CDF)"),
value: vm.state.subscriptions2[index].amount,
groupValue:vm.state.subscriptions2[index].amount,
onChanged: (double value) {
setState(() {
vm.state.subscriptions2[index].amount = value;
});
},
);
}),
),
])
),
_getActionButtons(vm),
SizedBox(height: 100)
]) ],
),
),
)
],
),
),
);
},
);
}
i have this error while running : RenderBox was not laid out

Related

How can I add a Container after a FutureBuilder?

How can you add more Containers or Widgets after using FutureBuilder?
I've been trying to combine these 2 blocks of code into one but can't figure out how to do so. I need the 2 buttons from code-block 2 to be added after this ListView.builder. Or does this have to be on 2 separate pages?
#override
Widget build(BuildContext context) =>
Scaffold(
body:
FutureBuilder<ListResult>(
future: futureFiles,
builder: (context, snapshot) {
if (snapshot.hasData) {
final files = snapshot.data!.items;
return ListView.builder(
itemCount: files.length,
itemBuilder: (context, index) {
final file = files[index];
double? progress = downloadProgress[index];
return ListTile(
title: Text(file.name),
subtitle: progress != null
? LinearProgressIndicator(
value: progress,
backgroundColor: Colors.black26,
)
: null,
trailing: IconButton(
icon: const Icon(
Icons.download,
color: Colors.white,
),
onPressed: () => downloadFile(index, file),
));
});
} else if (snapshot.hasError) {
return const Center(child: Text('Error occurred'));
} else {
return const Center(child: CircularProgressIndicator());
}
},
)
);
}
I want to combine the following code into the code above. But can't quite figure out how to do that.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if(pickedFile != null)
Expanded(
child: Container(
child: Center(
child: Image.file(File(pickedFile!.path!),width:double.infinity,fit: BoxFit.cover,),
//child: Text(pickedFile!.name),
)
)
),
if (pickedFile == null)
Expanded(
child: Container(
child: Center(
displayFiles()
)
)
),
Row(
mainAxisAlignment : MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: SizedBox(
height:40,
width: 150,
child:
ElevatedButton(
child: Text('Select File'),
onPressed: selectFile,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
textStyle: const TextStyle(fontSize: 20),
),
),
),
),
SizedBox(
height:40,
width: 150,
child: ElevatedButton(
child: Text('Upload File'),
onPressed: uploadFile,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
textStyle: const TextStyle(fontSize: 20)
),
),
),
],
),
buildProgress(),
],
),
),
);
}
I tried wrapping the buttons inside a Container but I can't figure out where to place the Container in the first block of code.
Do like this
Column(
children: [
Expanded(
child: FutureBuilder<ListResult>()),
//Second page code
Center()
]
)
You may return a Column widget from the builder of FutureBuilder instead of returning a ListView, and make ListView the first child of that Column. The buttons can be defined as second, third....etc children as you please.
itemCount: files.length + 3;
final file = files[index+3];
if(index==0){
(some widget)
}
else if(index==1){
(some widget)
}
if(index==2){
(some widget)
}else return ListTile()

Flutter Getx arguments is always returning null

I am using Getx package in flutter to pass data to another page.
But I am getting null data from the page.
this is my code to get.to
Get.to(xreadArticlePage(),transition: Transition.rightToLeft, arguments: 'dataExample');
this my code to get data from previous page. data is my data variable. xreadArticlePage is my page to get data.
Text(data.toString()),
this is to get previous page data. it has a to string because see the data without error for now
class xreadArticlePage extends StatelessWidget {
#override
var data = Get.arguments;
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Get.back();
},
child: Icon(Icons.arrow_back_ios)),
Icon(Icons.abc_outlined),
],
),
),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
child: Container(
child: FutureBuilder<List<dynamic>>(
future: fetch1WpPosts(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(
snapshot.data![0]["title"],
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Image.network(
snapshot.data![0]["featured_image_large"]),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
snapshot.data![0]["date"],
),
Text(data.toString()),
],
),
Html(data: snapshot.data![0]["content"]),
],
),
);
}
return CircularProgressIndicator();
}),
),
),
),
],
),
);
}
}
Use below code:
Get.toNamed(Routes.ADD_ADDRESS_SCREEN, arguments: {
'address': 'abc',
'city': 'xyz',
});

Fixed buttons between AppBar and SingleChildScrollView (Flutter)

I would like to include buttons between AppBar and ListView. In the example below, the buttons scroll along with the text. I tried to include the SingleChildScrollView within a Column, but was unsuccessful.
I read that the Column widget does not support scrolling. I already searched a lot, but I didn't find an example similar to what I need.
Can someone help me?
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('A Idade do Lobo'),
elevation: 0.0,
backgroundColor: COLOR_MAIN,
),
body: NotificationListener(
onNotification: (notif) {
if (_hasScroll) {
if (notif is ScrollEndNotification && scrollOn) {
Timer(Duration(seconds: 1), () {
_scroll();
setState(() {
_controlButton();
});
});
}
}
return true;
},
child: SingleChildScrollView(
controller: _scrollController,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Center(
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
onPressed: _showScrollPickerDialog,
child: Text('Rolagem ${_scrollSpeed}'),
),
new RaisedButton(
onPressed: _showTomPickerDialog,
child: Text('TOM ${_tom}'),
),
],
),
),
new Flexible(
fit: FlexFit.loose,
child: new ListView.builder(
shrinkWrap: true,
itemCount: _songDetails.length,
itemBuilder: (context, index) {
return new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: new EdgeInsets.all(5.0),
child: new RichText(
text: TextSpan(children: [
new TextSpan(
text: '${_songDetails[index].line}',
style: _getStyle(
_songDetails[index].type,
),
),
]),
),
),
],
);
},
),
),
],
),
),
),
floatingActionButton: _controlButton(),
);
}
}
You can use bottom properly of AppBar to achieve desire UI.
Following example clear your idea.
import 'package:flutter/material.dart';
class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
#override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("your title"),
bottom: PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, 40),
child: Center(
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
onPressed: () {},
child: Text('Rolagem '),
),
new RaisedButton(
onPressed: () {},
child: Text('TOM '),
),
],
),
),
),
),
body: Container(
child: ListView.builder(
itemBuilder: (context, int index) {
return Text(index.toString());
},
itemCount: 100,
),
));
}
}

Listview not showing inside a Row in Flutter

I am trying to show a listview after some texts in a column. The text shows properly inside the first Row until I add a listview inside the next row. Everything disappears after adding the ListView.
Here is the Code:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
"Prayer Time",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.normal),
),
],
),
Row(
children: <Widget>[myList()],
),
],
),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add Alarm',
child: Icon(Icons.add),
backgroundColor: const Color(0xff0A74C5),
),
);
}
Expanded myList() {
return Expanded(
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
)
);
}
}
change like this:
Expanded(
child: Row(
children: <Widget>[myList()],
),
),
Your ListView should have a fixed Size. Try to wrap the ListView inside a Container.
I run your code and fixed it. Replace your myList() with this code bellow:
Expanded myList() {
return Expanded(
child: Container(
width: double.infinity,
height: 200,
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
),
)
);
}

Is it possible to use a DropDownButton within an IconButton in Flutter?

Update:
#override
Widget build(BuildContext context) {
return new Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Container(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
children: <Widget>[
Expanded(
child: Stack(
children: [
Center(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Positioned(
right: 8,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 400)),
PopupMenuButton<String>(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
onSelected: choiceAction,
itemBuilder: (BuildContext context) {
return Constants.choices.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
),
],
),
),
],
),
),
],
),
I am trying to implement a DropDownButton inside the OnPressed command of an IconButton, so that when the icon is pressed, a drop down menu is shown.
Update: I've updated my code with the suggestion made, however the icon does not appear.
I'm not sure if this is a problem with my widget tree.
Updated Answer
Please check this code:
class DropdownMenu extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 400)),
PopupMenuButton<String>(
icon: Icon(Icons.settings),
onSelected: choiceAction,
itemBuilder: (BuildContext context) {
return Constants.choices.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
),
],
));
}
}
class Constants {
static const String FirstItem = 'First Item';
static const String SecondItem = 'Second Item';
static const String ThirdItem = 'Third Item';
static const List<String> choices = <String>[
FirstItem,
SecondItem,
ThirdItem,
];
}
void choiceAction(String choice) {
if (choice == Constants.FirstItem) {
print('I First Item');
} else if (choice == Constants.SecondItem) {
print('I Second Item');
} else if (choice == Constants.ThirdItem) {
print('I Third Item');
}
}
Note: This is not dropdown menu but i think this is what you want.
Old answer
You can try using showDialog
child: Row(
children: <Widget>[
IconButton(
icon: Icon(
Icons.settings,
color: Colors.black,
size: 30.0,
),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Country List'),
content: new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new DropdownButton<String>(
items: <String>['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
],
),
],
),
);
});
})
],
)