I want to show PopupMenu with dynamic data which will I got from API response. I tried with listview.builder inside PopupMenu child but it not works.
My code of showmenu()
void showMemberMenu() async {
await showMenu(
context: context,
position: RelativeRect.fromLTRB(200, 150, 100, 100),
items: [
PopupMenuItem(
value: 1,
child: Text(
"ROHIT",
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
color: green3),
),
),
PopupMenuItem(
value: 2,
child: Text(
"REKHA",
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
color: green3),
),
),
PopupMenuItem(
value: 3,
child: Text(
"DHRUV",
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
color: green3),
),
),
],
elevation: 8.0,
).then((value) {
if (value != null) print(value);
});
}
Please help to get out from this.
You can use List.generate method to generate the dynamic length of the list using the existing list you get from the API response.
Below is an example of how you can achieve it.
void showMemberMenu() async {
final List<String> popList = ['ROHIT', 'REKHA', 'DHRUV'];
await showMenu(
context: context,
position: RelativeRect.fromLTRB(200, 150, 100, 100),
items: List.generate(
popList.length,
(index) => PopupMenuItem(
value: 1,
child: Text(
popList[index],
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
),
),
),
),
elevation: 8.0,
).then((value) {
if (value != null) print(value);
});
}
I've added final List<String> popList = ['ROHIT', 'REKHA', 'DHRUV'];
just for the testing purpose, and you can replace it with your list
you get from API response.
Try this:
call the api and put the value in PopupMenuItem
class PopupMenu {
PopupMenu({#required this.title, #required this.onTap});
final String title;
final VoidCallback onTap;
static PopupMenuButton<String> createPopup(List<PopupMenu> popupItems) {
return PopupMenuButton<String>(
onSelected: (value) {
popupItems.firstWhere((e) => e.title == value).onTap();
},
itemBuilder: (context) => popupItems
.map((item) => PopupMenuItem<String>(
value: item.title,
child: Text(
item.title,
),
))
.toList(),
);
}
}
you can try to do something like this:
https://dartpad.dev/?id=a3f9002a37cbacc2cfae46174cbd2eba
you can add any state management to replace the FutureBuilder but this is the logical approach.
I hope it is helpful.
Related
I have a problem. Please help. I just started the program in a flutter. I want to display my array list(foto) to DropDownButton.
array list in firebase ,
final List<String> listCategorys = FirebaseFirestore.instance
.collection('shoppingList')
.doc('category');
String categoryName = 'fruit';
DropdownButton<String>(
focusColor: Colors.white,
value: categoryName,
style: const TextStyle(color: Colors.white),
iconEnabledColor: Colors.black,
items: listCategorys
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: const EdgeInsets.only(
left: 42,
),
child: Text(
value,
style: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
);
}).toList(),
hint: const Text(
"Select categories",
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.w500),
),
onChanged: (String? value) {
setState(() {
categoryName = value!;
});
},
),
when I create a rigid array final List<String> listCategorys = ['fruit', 'vegetables' ...] it works, but I won't get all data in firebase
Your Query should be
DocumentSnapshot snap = await FirebaseFirestore.instance
.collection('shoppingList')
.doc($yourDocumentID).get();
List<String> listOfCategory = List.from(snap.data['category']);
how to make dropdown list when on tap on button with out using dropdown button #flutterenter image description here
new DropdownButton(
value: _selectedLocation,
onChanged: (String newValue) {
setState(() {
_selectedLocation = newValue;
});
},
items: _locations.map((String location) {
return new DropdownMenuItem<String>(
child: new Text(location),
);
}).toList(),
Try below code hope its helpful to you . you must used dropdown_below from here, Refer my answer here also for same
Create your list:
List mobileList = [
{'no': 1, 'mobile': 'Apple'},
{'no': 2, 'mobile': 'Google'},
{'no': 3, 'mobile': 'Samsung'},
{'no': 4, 'mobile': 'Sony'},
{'no': 5, 'mobile': 'LG'},
];
One varibale and list our value
List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
var selectedmobile;
Create initState() and dispose() method:
#override
void initState() {
_dropdownTestItems = buildDropdownTestItems(mobileList);
super.initState();
}
#override
void dispose() {
super.dispose();
}
Add your selected gender value in dropdown
List<DropdownMenuItem<Object?>> buildDropdownTestItems(List mobileList) {
List<DropdownMenuItem<Object?>> items = [];
for (var i in mobileList) {
items.add(
DropdownMenuItem(
value: i,
child: Text(
i['mobile'],
style: TextStyle(color: Colors.black),
),
),
);
}
return items;
}
Your Widget:
Padding(
padding: const EdgeInsets.all(8.0),
child: DropdownBelow(
itemWidth: 150,
itemTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.black),
boxTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.white54),
boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
boxWidth: 150,
boxHeight: 45,
boxDecoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
width: 1,
color: Colors.black,
),
),
icon: Icon(
Icons.arrow_downward,
color: Colors.black,
),
hint: Text(
'Select Mobile',
style: TextStyle(
color: Colors.black,
),
),
value: selectedmobile,
items: _dropdownTestItems,
onChanged: (selectedTest) {
setState(() {
selectedmobile = selectedTest;
});
},
),
),
Your Result Screen->
is it possible to add widget input text field when I selected item 'other' dropdown in flutter?
this is for flutter mobile android
my code
List <String> klasifikasi = [
'Fatality',
'Lainnya'];
DropdownButton<String>(
focusColor:Colors.white,
value: _chosenValue,
//elevation: 5,
style: TextStyle(color: Colors.white),
iconEnabledColor:Colors.blue,
items: klasifikasi.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value,style:TextStyle(color:Colors.black),),
);
}).toList(),
hint:Text(
"Klasifikasi Insiden",
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.w400),
),
onChanged: (String value) {
setState(() {
_chosenValue = value;
if (_chosenValue == klasifikasi){
return Scaffold(
appBar: AppBar(),
body: Center(
child: Container(
color: Colors.grey,
child: _buildTextField(
labelText: 'Lainnya',
controller: _lainCtrl,
),
),
),
);
}
});
},
),
when I selected 'lainnya' showing textfield to input value
Maybe you can try this,
bool _showTextField = false;
Column(
children: [
DropdownButton<String>(
focusColor: Colors.white,
value: _chosenValue,
//elevation: 5,
style: TextStyle(color: Colors.white),
iconEnabledColor: Colors.blue,
items: klasifikasi.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
hint: Text(
"Klasifikasi Insiden",
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.w400),
),
onChanged: (String value) {
setState(() {
_chosenValue = value;
if (_chosenValue == klasifikasi.last) {
_showTextField = true;
} else {
_showTextField = false;
}
});
}),
Visibility(
visible: _showTextField,
child: //Your textfield here,
),
],
);
i hope that will be help you ^_^
Put you dropdown button in a column,
bool addtextfield = false;
if (_chosenValue == klasifikasi){
setState((){
addtextfield = true;
});
}
addtextfield == true?
//Show ur input field
:Container(),
I would like to add a hyperlink at the bottom of the screen where the Markdown widget is read.
I tried to include the hyperlink in the markdown file but flutter is not launching it.
Then I tried this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Protective measures'),
),
body: Column(
children: <Widget>[
Flexible(
child: FutureBuilder(
future: DefaultAssetBundle.of(context)
.loadString("assets/docs/protective_measures.md"),
builder:
(BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Markdown(
data: snapshot.data,
styleSheet: MarkdownStyleSheet(
textAlign: WrapAlignment.start,
p: TextStyle(
fontSize: 16,
color: isDark ? Colors.white : Colors.black,
),
h2: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: isDark ? Colors.white : Colors.black,
),
h1: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: isDark ? Colors.white : Colors.black,
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
),
InkWell(
child: Text(
'My Hyperlink',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.blue,
decoration: TextDecoration.underline
),
),
onTap: () => launch('https://stackoverflow.com'),
),
],
),
);
}
The result is not really what I wanted. I want a hypertext at the bottom of the screen, just after the Markdown. I also tried with ListView instead of Column but it's not working.
Any hint ?
For plugin flutter_markdown you can do like this
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:url_launcher/url_launcher.dart';
final String _markdownData = "-This is [Google link](https://www.google.com)";
// view
MarkdownBody(
data: _markdownData,
onTapLink: (text, url, title){
launch(url);
},
)
Update for flutter_markdown version 0.5.1 or lower:
MarkdownBody(
data: _markdownData,
onTapLink: (url) {
launch(url);
},
)
I got it. The Markdown() widget has a onTapLink method and I just need to do:
onTapLink(url){
launch(url);
}
It is always good to do a null reference check to:
MarkdownBody(
data: privacyPolicy._privacyPolicy,
onTapLink: (text, url, title){
launch(url!);
},
Expanding upon the code written by: Azamat Mirvosiqov
so I have a PopUpMenuButton which has some choices,
PopupMenuButton(
icon: Icon(
Icons.tune,
color: FortBuddyTheme.grey,
size: 24,
),
color: Colors.white,
onCanceled: () {},
onSelected: (int value) {
if (selectedChart == 0) {
setState(() {
playlist = 'p2';
name = 'Solo';
color = 0xff4af699;
});
} else if (selectedChart == 1) {
setState(() {
playlist = 'p10';
name = 'Duo';
color = 0xFFA29BFE;
});
} else if (selectedChart == 2) {
setState(() {
playlist = 'p9';
name = 'Squad';
color = 0xFF0984E3;
});
}
},
itemBuilder: (_) => [
PopupMenuItem(
child: Text(
'Show Solos Chart',
style: TextStyle(
fontFamily:
FortBuddyTheme.fontName,
fontSize: 16,
letterSpacing: 0.5,
height: 0.9,
color:
FortBuddyTheme.darkerText,
),
),
value: 0,
),
PopupMenuItem(
child: Text(
'Show Duos Chart',
style: TextStyle(
fontFamily:
FortBuddyTheme.fontName,
fontSize: 16,
letterSpacing: 0.5,
height: 0.9,
color:
FortBuddyTheme.darkerText,
),
),
value: 1,
),
PopupMenuItem(
child: Text(
'Show Squad Chart',
style: TextStyle(
fontFamily:
FortBuddyTheme.fontName,
fontSize: 16,
letterSpacing: 0.5,
height: 0.9,
color:
FortBuddyTheme.darkerText,
),
),
value: 2,
),
],
)),
It has a few if statements which check and set some variables, those variables are used by a widget, but even if the variables change under setState, the widget is not rebuilding.
(widget)
MainContainer(
animation: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animationController,
curve:
Interval((1 / count) * 3, 1.0, curve: Curves.fastOutSlowIn))),
animationController: animationController,
title: name,
key: UniqueKey(),
child: LineChartSample1(
key: UniqueKey(),
playlist: playlist,
title: '$name' + 's',
color: color,
),
),
Also note, the widget is being added through a addAllListData() function which adds all the widgets to a list, that list later gets build by a builder method.
Change your if statements, use value instead of selectedChart. Like this:
if (value == 0)
instead of
if (selectedChart == 0)