I've been working on a toy reminders app and wish to implement a dropdown menu for the user to select a given time interval.
I have the button loaded and can click on it with the correct menu popping up. The problem is the appearance of the button on the screen. It is the same color as the parent Widget and does not display the text of selected item at all.
How can I get the dropdown button to have a white background and black text?
Here is a screenshot:
And here is the code that builds this view:
#override
Widget build(BuildContext context) {
return new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_buildInformationRow(),
_buildReminderRow(),
],
)
)
],
)
);
}
Widget _buildInformationRow() {
return new Container(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
padding: const EdgeInsets.all(10.0),
child: new Text(
"This app can remind you to do stuff\non a regular basis",
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),
)
],
)
],
),
);
}
Widget _buildReminderRow() {
return new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: new Text(
"Remind me",
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),
)
],
),
new Column(
children: <Widget>[
new Container(
child: new DropdownButton<String>(
style: new TextStyle(
color: Colors.black,
fontSize: 18.0,
),
items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
return new DropdownMenuItem <String>(
value: value,
child: new Text(value)
);
}).toList(),
onChanged: null
)
)
],
)
],
),
);
}
Have you tried wrapping your Dropdown in a Container with a white color, then just ensure the child on the DropdownButton style attribute has a TextStyle with black color.
new Container(
color: Colors.white,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton<T>(
items: dropdownItems,
onChanged: this.onChanged,
value: this.preSelected,
style: new TextStyle(
color: Colors.black,
),
),
)
),
),
Note: I use the ButtonTheme to ensure the dropdown fills the width of the Container.
And you can also wrap the container around a Theme to change the background of the actual dropdown when active and displaying the menu items.
new Theme(
data: Theme.of(context).copyWith(
canvasColor: Theme.of(context).primaryColor
),
child: // Your Dropdown Code Here,
),
Theme(
data: new ThemeData(
canvasColor: Colors.red,
primaryColor: Colors.black,
accentColor: Colors.black,
hintColor: Colors.black),
child: DropdownButton(
iconEnabledColor: Colors.white,
style: TextStyle(color: _selectedColor,fontSize: 16),
underline: Text(''),
value: selectedCurrency,
isExpanded: true,
iconSize: 40,
items: currencies.entries
.map<DropdownMenuItem<String>>(
(MapEntry<String, String> e) =>
DropdownMenuItem<String>(
value: e.key,
child: Text(e.value),
))
.toList(),
onChanged: (String newKey) {
setState(() {
_selectedColor = Colors.white;
selectedCurrency = newKey;
});
},
))
Use hint instead of value
Example
hint: dropdownValue == null ? Text("Select one", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),
dropdownValue is the value that I selected
You can use the following code to give your customized color to DropDownButton hint
DropdownButton<String>(
isExpanded: true,
hint: Text('Your hint',style: TextStyle(color: Color(0xFFF5F5F5)),),
icon: Icon(Icons.arrow_downward),
iconSize: 20,
elevation: 12,
style: TextStyle(color: Colors.lightBlue),
underline: Container(
height: 0,
),
items: _currencies
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(fontSize: 14.0, color: Color(0xFFF5F5F5)),
),
);
}).toList(),
onChanged: (String valueSelected) {
onDropDownItemChanged(valueSelected);
},
value: dropdownValue,
//00000value: dropdownValue,
),
You can do it by
DropdownButtonHideUnderline(
child: Theme(
data: ThemeData(
primaryColor: Colors.white,
),
child: DropdownButton<String>(
isExpanded: true,
value: _selectedMetalColor,
onChanged: (String newValue) {
setState(() {
_selectedMetalColor = newValue;
//dropdownValue = newValue;
});
},
// hint: Text(
// teethMetalColors[0],
// style: TextStyle(
// color: Colors.white,
// ),
// ),
icon: Container(
margin: EdgeInsets.only(right: 12.0),
child: Icon(
// Add this
Icons.keyboard_arrow_down, // Add this
color: Colors.white, // Add this
size: 35.0,
),
),
style: TextStyle(
color: Colors.black, fontSize: 16.0),
selectedItemBuilder:
(BuildContext context) {
return teethMetalColors
.map((String value) {
return Padding(
padding: const EdgeInsets.only(
top: 12.0, left: 16.0),
child: Text(
_selectedMetalColor,
style:
TextStyle(color: Colors.white),
),
);
}).toList();
},
items: teethMetalColors
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
style:
TextStyle(color: Colors.black),
),
),
);
}).toList(),
),
),
)
try this, and replace the Container's color in the theme color:
Container(
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
decoration: BoxDecoration(
color: Colors.cyanAccent,
),
child: DropdownButtonHideUnderline(
child: new DropdownButton<String>(
style: new TextStyle(
color: Colors.black,
fontSize: 18.0,
),
items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
return new DropdownMenuItem <String>(
value: value,
child: new Text(value)
);
}).toList(),
onChanged: null
),
),
)
Related
I am trying to send data to API, But I can't make it to work. I use model to get data from users.
Here is the model
class SurgeryModel {
String id;
String name;
DateTime date;
String eye;
SurgeryModel(
{required this.id,
required this.date,
required this.name,
required this.eye});
}
And I am adding data like this.
void addNewSurgeryRecord(BuildContext ctx) {
showDialog(
context: context,
builder: (context) {
// we use statefulbilder because we need to use setState to update the dropdown menu state.
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10.0,
),
),
content: SingleChildScrollView(
child: Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text(
'Surgery Name',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
),
TextField(
keyboardType: TextInputType.multiline,
maxLength: 1000,
maxLines: null,
controller: sNameController,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(
15.0,
),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
borderSide: BorderSide(color: Colors.blue),
),
// labelText: 'Drug name',
// labelStyle: TextStyle(color: Colors.blue[200]),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent,
),
borderRadius: BorderRadius.circular(
15.0,
),
),
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text(
'Date',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
),
TextFieldContainer(
child: DateTimeField(
format: format,
onChanged: (getPrescriptionDate) {
formattedTodate = getPrescriptionDate!;
},
onShowPicker: (context, currentValue) {
return showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100));
},
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Select Date of Visited',
hintStyle: TextStyle(
fontSize: 15, fontWeight: FontWeight.normal),
),
initialValue: formattedTodate.toLocal(),
validator: (dateOfBirthValue) {
// dob = dateOfBirthValue.toString();
return null;
},
),
),
// TextFieldContainer(
// keyboardType: TextInputType.multiline,
// maxLength: 1000,
// maxLines: null,
// // controller: surgeryDateController,
// decoration: InputDecoration(
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(
// 15.0,
// ),
// ),
// focusedBorder: OutlineInputBorder(
// borderRadius:
// BorderRadius.all(Radius.circular(15.0)),
// borderSide: BorderSide(color: Colors.blue),
// ),
// // labelText: 'Drug name',
// // labelStyle: TextStyle(color: Colors.blue[200]),
// enabledBorder: OutlineInputBorder(
// borderSide: BorderSide(
// color: Colors.blueAccent,
// ),
// borderRadius: BorderRadius.circular(
// 15.0,
// ),
// ),
// ),
// ),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text(
'Eye',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
),
TextFieldContainer(
child: DropdownButtonHideUnderline(
child: DropdownButton(
icon: Visibility(
visible: false,
child: Icon(Icons.arrow_downward)),
isExpanded: true,
value: dropDownValue,
items: eyeSide.map((value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
onChanged: ((String? value) {
setState(() {
print(value);
dropDownValue = value!;
print(' print 2$value');
});
}),
),
),
),
// TextField(
// keyboardType: TextInputType.multiline,
// maxLength: 1000,
// maxLines: null,
// controller: sEyeController,
// decoration: InputDecoration(
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(
// 15.0,
// ),
// ),
// focusedBorder: OutlineInputBorder(
// borderRadius:
// BorderRadius.all(Radius.circular(15.0)),
// borderSide: BorderSide(color: Colors.blue),
// ),
// // labelText: 'Drug name',
// // labelStyle: TextStyle(color: Colors.blue[200]),
// enabledBorder: OutlineInputBorder(
// borderSide: BorderSide(
// color: Colors.blueAccent,
// ),
// borderRadius: BorderRadius.circular(
// 15.0,
// ),
// ),
// ),
// ),
],
),
],
),
),
actions: [
Align(
alignment: Alignment.bottomRight,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
onPressed: () {
widget.addSurgery(
sNameController.text,
dropDownValue,
formattedTodate,
);
// _addNewSurgery(sNameController.text, sEyeController.text);
print(sNameController.text);
print(sEyeController.text);
print(formattedTodate.toString());
Navigator.of(context).pop();
},
child: Text('Done'),
),
),
],
);
});
});
}
Below function is in another screen I pass this function to the above code screen.
void _addNewSurgery(String sName, String sEye, DateTime date) {
final newProp = SurgeryModel(
date: date,
name: sName,
eye: sEye,
id: DateTime.now().toString(),
);
setState(() {
widget.surgeData.add(newProp);
});
}
With help of these codes I am sending data to the web like below code
testFunction() async {
var localStorage = await SharedPreferences.getInstance();
var data = {
'surgeryHistory ': surgeData.toList(),
};
print('viewing pres data $data');
var res = await Network().authData(data, '/route');
debugPrint('printing before response ${res.body}');
var body = json.decode(res.body);
debugPrint('printing coming response ${body}');
}
I am getting this data like this on the web side(in laravel)
public function testWebFunction(Request $request)
{
$surgery_history = $request->get('surgeryHistory');
$surgery_history_index = $surgery_history;
return $surgery_history;
}
But I am getting error like this,
Am I doing something wrong here? I need to get those data to the web and save that data in to the database using for loop. In backend side I am using foreach to save data but i cant get sizeof the variable. Any answer will help me to overcome this situation. Thank You.
I am making meme generator app . And i need to show multiple texts over the images , I am able to get one draggable text but i want the user to add multiple text . can you please help me out .
I am fetching the image via my api and i have created a stacked layout on which i have added my text .
I have provided some text customization option to users . I want users to add multiple text and they can also customize them
import 'dart:io';
import 'dart:math';
import 'dart:typed_data';
import 'dart:convert';
import 'package:admob_flutter/admob_flutter.dart';
import 'package:bordered_text/bordered_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:meme_app/Screens/CustomMemes.dart';
import 'package:meme_app/Services/admob_services.dart';
import 'dart:ui' as ui;
import 'package:meme_app/image editor/lists.dart';
import 'package:path_provider/path_provider.dart';
class CustomSceen3 extends StatefulWidget {
final String imgUrl;
final File imgFile;
CustomSceen3({
this.imgUrl,
this.imgFile,
});
#override
_CustomSceen3State createState() => _CustomSceen3State();
}
class _CustomSceen3State extends State<CustomSceen3> {
GlobalKey<ScaffoldState> scaffoldState = GlobalKey();
Size size = Size(600, 800);
List<Widget> data = <Widget>[];
Offset offset = Offset.zero;
String addedText = '';
String newText;
int total=0;
//settings
Color pickerColor = Color(0xffffffff);
Color currentColor = Color(0xffffffff);
double textSize = 28.0;
String customFont = 'Aileron-Black';
GlobalKey _key = GlobalKey();
File _imageFile;
Random rng = new Random();
int whiteSpace = 0;
bool strike = false;
double strokeSize = 2.0;
Color strokePickerColor = Color(0xff000000);
Color strokeCurrentColor = Color(0xff000000);
TextEditingController myController = TextEditingController()
..text = "";
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: Container(
color: Colors.black,
child: Center(
child: SingleChildScrollView(
child: Container(
color: Colors.white,
child: RepaintBoundary(
key: _key,
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: whiteSpace.toDouble() * 5,
color: Colors.white,
),
widget.imgFile == null
? Image(
image: NetworkImage(widget.imgUrl),
)
: Image.file(widget.imgFile, height: 300,
width: MediaQuery
.of(context)
.size
.width,
fit: BoxFit.fill,),
],
),
Positioned(
left: offset.dx,
top: offset.dy,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
offset = Offset(
offset.dx + details.delta.dx, offset.dy + details.delta.dy);
});
},
child: Container(
child: BorderedText(
strokeColor: strokeCurrentColor,
strokeWidth: strokeSize ,
child: Text(
addedText,
style: TextStyle(
fontFamily: customFont,
fontSize: textSize,
color: currentColor
),
),
),
),
),
),
],
),
),
),
),
),
)
),
Container(
color: Colors.black,
height: 80.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DropdownButton<int>(
style: TextStyle(
color: Colors.white,
),
value: whiteSpace,
dropdownColor: Colors.black87,
isDense: true,
icon: Icon(Icons.padding, color: Colors.white,),
iconSize: 30,
onChanged: (int newValue) {
setState(() {
whiteSpace = newValue;
});
},
items: whiteSpaceList
.map<DropdownMenuItem<int>>((int value) {
return DropdownMenuItem<int>(
value: value,
child: Text(value.toString() + "%"),
);
}).toList(),
),
Center(
child: Text(
"Add Space", maxLines: 2, overflow: TextOverflow
.clip,
style: TextStyle(
fontSize: 11, color: Colors.white),
),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(Icons.text_format, color: Colors.white,
size: 30,),
onPressed: () {
TextDialog();
}
),
Text(
"Text", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(
Icons.emoji_emotions_outlined, color: Colors
.white, size: 30,),
onPressed: null
),
Text(
"Sticker", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(Icons.download_outlined, color: Colors
.white, size: 30,),
onPressed: null
),
Text(
"Save", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: GestureDetector(
onTap: (){
setTextStyle();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"Aa",style:TextStyle(
fontSize: 30,color: Colors.white,fontFamily: 'ComicRelief'
),
),
Text(
"Font", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
),
],
)
)
],
),
),
);
}
Widget setTextStyle(){
showDialog(
context: context,
builder: (BuildContext context){
return Dialog(
backgroundColor: Colors.black54,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 400,
child: Center(
child: Column(
children: [
CustomTextStyle(
tittle: "Black Text",
color: Colors.white,
strokecolor: Colors.white,
font: 'OpenSans-Regular',
strokewidth: 0.0,
onTap: (){
setState(() {
strokeSize= 0.0;
currentColor=Colors.black;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.white;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "STANDARD MEME",
color: Colors.white,
strokecolor: Colors.black,
font: 'Anton',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.white;
customFont= 'Anton';
strokeCurrentColor=Colors.black;
addedText=addedText.toUpperCase();
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Modern Meme",
color: Colors.black,
strokecolor: Colors.white,
font: 'OpenSans-Regular',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.black;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.white;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Dark Modern Meme",
color: Colors.white,
strokecolor: Colors.black,
font: 'OpenSans-Regular',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.white;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.black;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Black Object White Outline",
color: Colors.black,
strokecolor: Colors.white,
font: 'Aileron-Bold',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.black;
customFont= 'Aileron-Bold';
strokeCurrentColor=Colors.white;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "White Object Black Outline",
color: Colors.white,
strokecolor: Colors.black,
font: 'Aileron-Bold',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.white;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.black;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Yellow Subtittle",
color: Color(0xfeFFE400),
strokecolor: Colors.black,
font: 'OpenSans-Regular',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Color(0xfeFFE400);
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.black;
Navigator.of(context).pop();
});
},
)
],
),
),
),
),
);
}
);
}
Widget TextDialog() {
showDialog(
context: context,
barrierDismissible: true, // user must tap button!
builder: (BuildContext context) {
return ListView(
children:[ Container(color: Colors.black54,
child: Dialog(
backgroundColor: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.invert_colors, color: Colors.white),
onPressed: null),
IconButton(
icon: Icon(Icons.add_circle, color: Colors.white),
onPressed: null),
IconButton(
icon: Icon(Icons.remove_circle, color: Colors.white),
onPressed: null),
IconButton(icon: Icon(Icons.format_align_center_outlined), onPressed: null)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
OutlineButton(
borderSide: BorderSide(width: 1.0,
color: Colors.white,
style: BorderStyle.solid),
onPressed: () {
setState(() {
addedText = myController.text;
Navigator.of(context).pop();
}
);
},
child: Text(
"Got it", style: TextStyle(color: Colors.white),
),
)
],
)
],
),
textfield(),
Container(height: 50,
color: Colors.black,
child: ListView.builder(
itemCount: colors.length,
scrollDirection: Axis.horizontal, physics: ScrollPhysics(),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: GestureDetector(
onTap: () {
setState(() {
currentColor = colors[index];
Navigator.of(context).pop();
TextDialog();
});
},
child: Container(
width: 40.0,
decoration: BoxDecoration(
color: colors[index], //this is the important line
shape: BoxShape.circle,
border: Border.all(
width: 2.0, color: Colors.white60)
),
),
),
);
},
),
),
],
),
),
),
),
],
);
}
);
}
Widget textfield() {
return TextField(
controller: myController,
maxLines: 10,
);
}
}
class CustomTextStyle extends StatelessWidget {
CustomTextStyle({this.color,this.tittle,this.strokecolor,this.font,this.strokewidth,this.onTap
});
final Color color;
final Color strokecolor;
final double strokewidth;
final String tittle;
final String font;
final Function onTap;
#override
Widget build(BuildContext context) {
return ListTile(
onTap: onTap,
title: BorderedText(
strokeColor: strokecolor,
strokeWidth: strokewidth,
child: Text(
tittle,
style: TextStyle(
color: color,fontFamily: font,fontSize: 17,letterSpacing: 1.05
),
),
),
);
}
}
Here, I am trying flutter_form_builder for the dropdown. but there is some problem when I check the validation of all fields while button clicks on the Next button. it will check the form state is valid or not. if I click on the next button it will show all the required filed it will show me dropdown also but id I am not the select value from drop-down then it needs do not redirect any other page without selecting dropdown value because there is required validation. so the issue is drop-down validation is showing but not working.
Here is code of my screen :
class _AddWalkinServiceScheduleScreenState
extends State<AddWalkinServiceScheduleScreen>
with TickerProviderStateMixin {
final GlobalKey<FormState> _formkey = GlobalKey<FormState>();
AddWalkinModel model;
bool autovalidate = false;
final TextEditingController _bspBusinessLegalAddress =
TextEditingController();
LocationResult _pickedLocation;
Map<String, dynamic> _typeValue;
AnimationController controller;
Animation<double> animation;
final TextEditingController _serviceDate = TextEditingController();
TextEditingController _serviceTime = new TextEditingController();
String _isoDate;
String addresschoice;
List<String> _imageFilesList2 = [];
List<File> _licenseImages2 = [];
bool _isFlexible = false;
String _serviceType;
List<dynamic> _type = <dynamic>[];
#override
void initState() {
super.initState();
}
Widget _builddate() {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 11),
child: Text(
"Date",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
_buildservicedate(),
],
),
);
}
Widget _buildselectAddress() {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 11),
child: Text(
"Select Address",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
_buildaddresschoice(),
addresschoice == "Current Location"
? _addressTextfield()
: (addresschoice == "Select from address book" ||
model.address != null)
? _addressTextfield()
: SizedBox(),
_buildServicetype()
],
),
);
}
Widget _addressTextfield() {
return TudoTextWidget(
prefixIcon: Icon(FontAwesomeIcons.mapMarkedAlt),
labelText: "Address",
hintText: "Address",
controller: _bspBusinessLegalAddress,
validator: (val) =>
Validators.validateRequired(val, "Address"),
);
}
Widget _buildServicetype() {
return FormBuilder(
autovalidate: autovalidate,
child: FormBuilderCustomField(
attribute: "Select Address",
validators: [FormBuilderValidators.required()],
formField: FormField(
builder: (FormFieldState<dynamic> field) {
return InputDecorator(
decoration: InputDecoration(
prefixIcon: Icon(Icons.business_center),
errorText: field.errorText,
),
isEmpty: _typeValue == [],
child: new DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("Service Type"),
isExpanded: true,
items: [
"Normal",
"Urgent",
"Emergency",
].map((option) {
return DropdownMenuItem(
child: Text("$option"),
value: option,
);
}).toList(),
value: field.value,
onChanged: (value) {
field.didChange(value);
_serviceType = value;
},
),
),
);
},
)),
);
}
Widget content(BuildContext context, AddWalkinServiceDetailViewModel awsdVm) {
var colorStyles = Theming.colorstyle(context);
Orientation orientation = MediaQuery.of(context).orientation;
return Scaffold(
backgroundColor: colorStyles['primary'],
appBar: AppBar(
elevation: 0,
title: Text("Service Details"),
centerTitle: true,
),
bottomNavigationBar: Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton.icon(
icon: Icon(FontAwesomeIcons.arrowCircleRight),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
label: Text('Search'),
color: colorStyles["primary"],
textColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () {
setState(() {
autovalidate = true;
});
if (_formkey.currentState.validate()) {
List<ServicePicture> id1Images = [];
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ServiceProviderMapScreen(
addWalkinModel: model,
),
),
);
}
}
),
],
),
),
body: FadeTransition(
opacity: animation,
child: Container(
child: Form(
autovalidate: autovalidate,
key: _formkey,
child: Stack(
children: <Widget>[
SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_builddate(),
_buildflexible(),
],
),
),
)
],
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return new StoreConnector<AppState, AddWalkinServiceDetailViewModel>(
converter: (Store<AppState> store) =>
AddWalkinServiceDetailViewModel.fromStore(store),
builder: (BuildContext context, AddWalkinServiceDetailViewModel awsdVm) =>
content(context, awsdVm),
);
}
}
You should be using FormBuilderDropdown instead. This is included in flutter_form_builder.
DropdownButtonHideUnderline(
child: FormBuilderDropdown(
name: 'dropdown'
hint: Text("Service Type"),
isExpanded: true,
items: [
"Normal",
"Urgent",
"Emergency",
].map((option) {
return DropdownMenuItem(
child: Text("$option"),
value: option,
);
}).toList(),,
),
),
Using this, the dropdown value can be extracted by calling it from the Map GlobalKey<FormState>.currentState.value using the name set earlier as the key.
_formKey.currentState.value['dropdown']
I have a for Loop where articles get loaded into a Widget and I only want one to be enabled, so how can I do that?
So far I got it working, but it doesn't recognise if I pressed another Button and I am relatively new to Flutter so I don't exactly know how I can implement such a feature.
Widget for Articles
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:wiegon/icons/nuleo_icons.dart';
import 'package:wiegon/main.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:wiegon/pages/control_screen.dart';
import 'package:wiegon/widgets/widgets.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:page_transition/page_transition.dart';
class ArticleandAmount extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: new SvgPicture.asset(wiegonLogo,
allowDrawingOutsideViewBox: true,
semanticsLabel: 'Wiegon Logo'),
onPressed: null,
);
},
),
title: Text(
"Artikel und Menge",
style: TextStyle(fontSize: 18, color: Color(0xffFDFEFE)),
),
backgroundColor: Color(0xff466988),
),
body: Articleamount(),
endDrawer: Enddrawer());
}
}
class Articleamount extends StatefulWidget {
#override
_ArticleamountState createState() {
return _ArticleamountState();
}
}
String displayedWeight;
String displayedTotalPrice;
String displayedPrice;
String articleID;
String unit = "";
String articleSelected = "Artikel wählen";
class _ArticleamountState extends State<Articleamount> {
final amountController = TextEditingController();
static Color disabledColor = mainColor.withOpacity(0.5);
double price = 0.0;
double inputAmount = 0;
bool isArticleSelected = false;
bool isPriceSelected = false;
Color buttonColor = disabledColor;
String totalPrice = "0";
#override
void dispose() {
// Clean up the paremeters when the widget is disposed.
unit = "";
articlesList = {};
articleSelected = "Artikel wählen";
amountController.dispose();
super.dispose();
}
Widget articleCard(
String articleName, IconData icon, double priceForArticle) {
String tempunit = articleName.split("|")[1];
String tempID = articleName.split("&")[1].split("|")[0];
articleName = articleName.split("&")[0];
return SingleChildScrollView(
child: Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
width: 300,
height: 120,
padding: EdgeInsets.all(5),
child: MaterialButton(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
articleName,
overflow: TextOverflow.fade,
style: TextStyle(fontWeight: FontWeight.bold),
)),
highlightColor: Colors.blue,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10,
)),
elevation: 2,
onPressed: () {
articleSelected = articleName;
articleID = tempID;
setState(() {
amountController.text = "";
totalPrice = "0";
buttonColor = disabledColor;
inputAmount = 0;
unit = tempunit;
price = priceForArticle;
isArticleSelected = true;
});
},
),
));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(children: <Widget>[
FractionallySizedBox(
widthFactor: deviceWidth(context),
child: Center(
child: Container(
width: 600,
margin: EdgeInsets.only(top: 35),
color: Colors.transparent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
progressBar(Nucleo.checked, "Bürger", true),
progressLine(true, context),
progressBar(
Nucleo.selected_two, "Artikel und Menge", true),
progressLine(false, context),
progressBar(Nucleo.three, "Buchung", false),
],
),
Container(
margin: EdgeInsets.only(top: 35),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Bürger".toUpperCase(),
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold),
),
new Padding(
padding: EdgeInsets.only(top: 3),
),
Text(
getCitizenInformation(),
style: TextStyle(
fontSize: 17, color: secondaryColor),
)
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(top: 30),
// width: 600,
child: Row(children: [
Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Artikel und Menge wählen",
style: TextStyle(
color: secondaryColor,
fontSize: 21,
fontWeight: FontWeight.bold),
),
Container(
margin: EdgeInsets.only(top: 4),
height: 5,
width: 30,
color: secondaryColor)
],
),
]),
)
],
),
Row(
children: [
Container(
margin: EdgeInsets.only(top: 40),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.transparent),
width: 600,
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Wrap(
alignment: WrapAlignment.spaceBetween,
children: <Widget>[
for (var article in articlesList.keys)
articleCard(
article,
MdiIcons.chessQueen,
articlesList[article])
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 40),
height: 70,
width: 600,
decoration: new BoxDecoration(
borderRadius:
BorderRadius.circular(10),
color: Colors.white),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 220,
margin:
EdgeInsets.only(left: 10),
child: TextField(
onChanged: (text) {
totalPrice = calculatePrice(
text, price);
},
keyboardType:
TextInputType.number,
controller: amountController,
decoration: InputDecoration(
labelStyle: TextStyle(
fontSize: 13),
labelText:
"$articleSelected"),
),
),
Text(
"á € $price / $unit",
style: TextStyle(
color: primaryColor,
fontSize: 20),
),
Text(
"$totalPrice€",
style: TextStyle(
color: secondaryColor,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
],
),
),
],
),
Container(
margin: EdgeInsets.only(top: 30),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
ButtonTheme(
minWidth: 280,
height: 50,
child: OutlineButton(
borderSide: BorderSide(
color: mainColor, width: 2),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
10)),
child: Text(
"Zurück",
style: TextStyle(
color: mainColor,
fontSize: 16,
),
),
onPressed: () {
Navigator.pop(context);
},
),
),
MaterialButton(
minWidth: 280,
height: 50,
color: buttonColor,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
10)),
child: Text(
"Weiter",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
onPressed: () {
if (isArticleSelected == true &&
isPriceSelected == true &&
inputAmount != 0) {
Navigator.push(
context,
PageTransition(
type: PageTransitionType
.rightToLeftWithFade,
child:
Controlscreen()));
} else {
Fluttertoast.showToast(
msg:
"Eingaben bitte überprüfen",
toastLength:
Toast.LENGTH_SHORT,
gravity:
ToastGravity.BOTTOM,
timeInSecForIos: 1,
backgroundColor:
Colors.red,
textColor: Colors.white,
fontSize: 16.0);
}
}),
],
),
)
]),
),
],
),
]))))
]));
}
String calculatePrice(String inputText, double price) {
double amount;
if (inputText.isNotEmpty) {
amount = double.parse(inputText);
} else {
amount = 0;
}
double total = (amount * price);
setState(() {
totalPrice = total.toStringAsFixed(2);
isPriceSelected = true;
inputAmount = amount;
buttonColor = mainColor;
});
displayedTotalPrice = totalPrice;
displayedWeight = amount.toString();
displayedPrice = price.toString();
return totalPrice;
}
}
You can use a variable to know if a button is already pressed. Like this:
var isSelected = false;
FlatButton(
onPressed: () => { isSelected = true },
child: Text(
"Selling"
),
color: isSelected ? Theme.of(context).primaryColor : Colors.grey,
),
How to Add Rounded Rectangle Border?
Below Code didn't result in any border on screen.
Container(margin: EdgeInsets.only(top: 10.0, right: 10.0, left: 10.0),
width: double.infinity,
// decoration: ShapeDecoration(
// shape: RoundedRectangleBorder(
// borderRadius:BorderRadius.all(Radius.circular(5.0)),
// ),
child: DropdownButtonHideUnderline(
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0),
child: new DropdownButton<UserTest>(...),
),
),
),
With the form field variant, you can use the OutlineInputBorder InputBorder, used normally for input text fields:
DropdownButtonFormField(
...
decoration: const InputDecoration(
border: OutlineInputBorder(),
),
),
The way the form field does this can be replicated and used with the regular DropdownButton:
InputDecorator(
decoration: const InputDecoration(border: OutlineInputBorder()),
child: DropdownButtonHideUnderline(
child: DropdownButton(
...
),
),
),
You need to specify the side: property. By default it is BorderSide.none.
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, style: BorderStyle.solid),
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
),
If what you want is this...
Then here you go
import 'package:flutter/material.dart';
class RoundedBorderDropdown extends StatelessWidget {
final List<String> _dropdownValues = [
"One",
"Two",
"Three",
"Four",
"Five"
]; //The list of values we want on the dropdown
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rounded Border Button in AppBar'),
),
body: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.red, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButton(
items: _dropdownValues
.map((value) => DropdownMenuItem(
child: Text(value),
value: value,
))
.toList(),
onChanged: (String value) {},
isExpanded: false,
value: _dropdownValues.first,
),
),
),
);
}
}
That is courtesy inducesmile
Happy Coding...
Column(
crossAxisAlignment : CrossAxisAlignment.start,
children: <Widget> [
Text('Gender:'),
InputDecorator(
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: const BorderRadius.all(Radius.circular(4.0)),
contentPadding: EdgeInsets.all(10),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: gender,
isDense: true,
isExpanded: true,
items: [
DropdownMenuItem(child: Text("Select Gender"), value: ""),
DropdownMenuItem(child: Text("Male"), value: "Male"),
DropdownMenuItem(child: Text("Female"), value: "Female"),
],
onChanged: (newValue) {
setState(() {
});
},
),
),
),
]
),
You can try with this
Container(
padding: EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey),
borderRadius: BorderRadius.circular(5),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
borderRadius: BorderRadius.circular(12),
isExpanded: true,
items: <String>[
'1 km',
'2 km',
'3 km',
'4 km',
'5 km'
].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
hint:
ourtext("Select area", fontSize: 14),
onChanged: (_) {},
),
),
),
Container(width: 200.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
border: Border.all(color: Colors.blueGrey)),
child: DropdownButton<String>(
hint: Text("Messaging"),
items: <String>['Messaging', 'Chating', 'No Longer Interested', 'Document Request'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
)
Wrap it in a Material and remove DropDown borders
Material(
borderRadius: BorderRadius.circular(40),
child: SizedBox(
width: MediaQuery.of(context).size.width / 1.08,
child: DropdownButton(
style: style.copyWith(color: Colors.black),
isExpanded: true,
underline: DropdownButtonHideUnderline(child: Container()),
value: value,
items: ...
),
)
In case you want to make rounded corners for the menu itself, just add borderRadius properties in DropdownButton:
DropdownButton(
borderRadius:BorderRadius.circular(12),
items: ...
)
String selectedValue
String selected value;
Widget createRoundedDropDown (){
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
borderRadius: BorderRadius.circular(10),
style: TextStyle(color: Colors.black,fontSize: 14,),
hint: Text("hint text"),
value: selectedValue,
isDense: true,
onChanged: (newValue) {
setState(() {
selectedValue = newValue;
});
},
items: listItems.map((document) {
return DropdownMenuItem<String>(
value: document.name,
child: FittedBox(fit:BoxFit.fitWidth,
child: Text(document.name,
style:TextStyle(fontSize: 16))),
);
}).toList(),
),
),
),
);}