Changing the Slider Height - flutter

I've tried a lot, but I can't change the height of AlertDialog when I use Slider. I saw here on the Forum the suggestion to use ConstrainedBox. Did n't work. Is there a better way to show the Slider?
#override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(maxHeight: 100.0),
child: AlertDialog(
title: Text('Selecione a velocidade'),
content: Container(
child: Slider(
value: _fontSize,
label: _fontSize.round().toString(),
min: 20,
max: 200,
divisions: 18,
onChanged: (value) {
setState(() {
_fontSize = value;
});
},
),
),
actions: <Widget>[
FlatButton(
onPressed: () {
print('cancelar');
// Use the second argument of Navigator.pop(...) to pass
// back a result to the page that opened the dialog
Navigator.pop(context, _fontSize);
},
child: Text('Cancelar'),
),
FlatButton(
onPressed: () {
print('salvar');
// Use the second argument of Navigator.pop(...) to pass
// back a result to the page that opened the dialog
Navigator.pop(context, _fontSize);
},
child: Text('Salvar'),
),
FlatButton(
onPressed: () {
print('aplicar');
// Use the second argument of Navigator.pop(...) to pass
// back a result to the page that opened the dialog
Navigator.pop(context, _fontSize);
},
child: Text('Aplicar'),
),
],
),
);
}
I attached an image showing how AlertDialog looks.

You need to define the height for the Container which outside the Slider.
content: Container(
height:50, // define any height you want here
child: Slider(
This is how the output looked like.

Try this.
Dart pad to show your output
Let me know if it work out for you or not.
Code is here
#override
Widget build(BuildContext context) {
return FittedBox(
child: AlertDialog(
title: Text('Selecione a velocidade'),
content: Container(
child: Slider(
value: _fontSize,
label: _fontSize.round().toString(),
min: 20,
max: 200,
divisions: 18,
onChanged: (value) {
setState(() {
_fontSize = value;
});
},
),
),
actions: <Widget>[
FlatButton(
onPressed: () {
print('cancelar');
// Use the second argument of Navigator.pop(...) to pass
// back a result to the page that opened the dialog
Navigator.pop(context, _fontSize);
},
child: Text('Cancelar'),
),
FlatButton(
onPressed: () {
print('salvar');
// Use the second argument of Navigator.pop(...) to pass
// back a result to the page that opened the dialog
Navigator.pop(context, _fontSize);
},
child: Text('Salvar'),
),
FlatButton(
onPressed: () {
print('aplicar');
// Use the second argument of Navigator.pop(...) to pass
// back a result to the page that opened the dialog
Navigator.pop(context, _fontSize);
},
child: Text('Aplicar'),
),
],
),
);
}
}

Related

how to change between multi widgets in flutter?

I have a line contains 4 outlinedbuttons and i have 4 widgets ( listview , ListWheelScrollView ,image png and svg image ) i want to display one widget only when i pressed at one outlinedbutton . what should i use for do this in flutter?
provide some code will be helpfull
Container(
padding: EdgeInsets.all(8.0),
height: 100,
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () =>
//show widget1
)),
Expanded(
child: OutlinedButton(
onPressed: () =>
//show widget2
)),
Expanded(
child: OutlinedButton(
onPressed: () =>
//show widget3
)),
Expanded(
child: OutlinedButton(
onPressed: () =>
//show widget4
)),
],
),
)
Create enum
enum WidgetEnum { LISTVIEW, LIST_WHEEL_SCROLLVIEW, IMAGE, SVG_IMAGE }
Global variable for updating the value.
//set the default value.
var isEnumValue = WidgetEnum.LISTVIEW;
Widget
//place this method or place those widget in build method
Widget getVisibleWidget() {
return Container(
padding: EdgeInsets.all(8.0),
child: Column(
children: [
Row(
children: [
//1
Expanded(
child: OutlinedButton(
onPressed: () {
setEnumValue(WidgetEnum.LISTVIEW);
},
child: Text("Button LISTVIEW"),
),
),
//2
Expanded(
child: OutlinedButton(
onPressed: () {
setEnumValue(WidgetEnum.LIST_WHEEL_SCROLLVIEW);
},
child: Text("Button LIST_WHEEL_SCROLLVIEW"),
),
),
//3
Expanded(
child: OutlinedButton(
onPressed: () {
setEnumValue(WidgetEnum.IMAGE);
},
child: Text("Button IMAGE"),
),
),
//4
Expanded(
child: OutlinedButton(
onPressed: () {
setEnumValue(WidgetEnum.SVG_IMAGE);
},
child: Text("Button SVG_IMAGE"),
),
),
],
),
//1
Visibility(
visible: isEnumValue == WidgetEnum.LISTVIEW,
child: Text("LISTVIEW"),
),
//2
Visibility(
visible: isEnumValue == WidgetEnum.LIST_WHEEL_SCROLLVIEW,
child: Text("LIST_WHEEL_SCROLLVIEW"),
),
//3
Visibility(
visible: isEnumValue == WidgetEnum.IMAGE,
child: Text("IMAGE"),
),
//4
Visibility(
visible: isEnumValue == WidgetEnum.SVG_IMAGE,
child: Text("SVG_IMAGE"),
),
],
),
);
}
Set the enum value for updating Widget visibility.
void setEnumValue(var enumValue){
isEnumValue = enumValue;
setState(() {
});
}
You can do it in different ways.. A simple one would be creating 4 boolean variables for each widget. On pressing button true value for particular widget and false other 3 values. On the otherside, use if(isthiswidget) to display widget if value is true. some demo of code
bool widget1, widget2, widget3, widget4 = false;
onpressing widget1
onPressed: (){
widget1 = true;
widget2, widget3, widget4 = false;}
onpressing widget2
onPressed: (){
setState(() {
widget2 = true;
widget1, widget3, widget4 = false;
});
}
do same for other functions
in UI set condition before every widget
if(widget1)
Container(), //display widget1
if(widget2)
Container() //display widget2
if(widget3)
Container(), //display widget3
if(widget4)
Container() //display widget4
note: use setstate, provider or any other statemanagement method to update realtime values and UI
create this var to identify which widget to show, it will get value from 0 to 3
int widgetNum = 0;
and in onPressed of each button add this, don't forget to add correct num
onPressed: () =>setState(() {
//for example
widgetNum = 2; //for first btn will be = 0 etc..
});
and use visibility to show widget
Column(
children:[
Visibility(
visible: widgetNum==2, // for first widget will be ==0 etc..
child: Container(
// your widget
))]
)

Flutter: floating modal sheet

Is there a widget that is kind of like the Modal BottomSheet() where you call using the showModalBottomSheet function, but instead it is not sticking at the bottom but floating in the middle of the screen? like an alert dialog but you can add textField into it.
Do you mean SimpleDialog?
SimpleDialog(
title: Text('Choose food'),
children:[
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, "Pizza"); },
child: const Text('Pizza'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, "Burger");
},
child: const Text('Burger'),
),
],
elevation: 10,
//backgroundColor: Colors.green,
)

Enable/disable CupertinoDialogAction depending on CupertinoTextField is empty or not

I want to set CupertinoDialogAction to enable if CupertinoTextField is not empty else by default it should be disabled, also I have set the "isDefaultAction: false" but it is still clickable.
showDialog(
context: context,
builder: (BuildContext context) => CupertinoAlertDialog(
actions: [
CupertinoDialogAction(
onPressed: () => (Navigator.of(context).pop()),
child: Text("Cancel"),
),
CupertinoDialogAction(
child: Text("Save"),
isDefaultAction: false,
),
],
title: Text("New Folder"),
content: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Enter a name for this folder"),
),
Container(
height: 30,
child: CupertinoTextField(
controller: folderName,
placeholder: "Name",
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
),
)
],
),
),
);
If you want to disable a CupertinoDialogAction, you need to set the onPressed property to null. It will look like this:
Bool isEnabled = false;
#override
void initState() {
super.initState();
folderName.addListener(enableButton); // addListened to your TextEditingController!
}
It will set isEnabled to true.
enableButton()
{
if(folderName.text != "")
{
setState(() {
isEnabled = true;
});
}
}
And, then you can use this boolean field.
CupertinoDialogAction(
onPressed: !isEnabled
? null
: () {
// Do what you need!
// Save method!
},
child: Text("Save"),
isDefaultAction: false,
),
Create a stateful widget that builds the list of actions and returns CupertinoAlertDialog with those actions. This widget should contain some state that indicates if the save action should be enabled or not. If it should not be enabled, put null into the onPressed handler.
Write some handler that uses setState to set this enabled/disabled state depending on what the user is doing.
Return your stateful widget from the showDialog builder

Flutter popupmenubutton isn't closed until select any popup item

Everything works fine but popupmenubutton isn't closed until any popup item is selected. I do not understand why the popup menu does not close after clicking outside the popup menu and onCanceled does not called.
Please help me.
I have provided the source code below. Thanks.
//Call from Here
StatefulWidget> Scafold(
bottomNavigation,
TabBar
body: widgets>
//under tabBar
child: callAction(
tooltip: "Call Button",
child: Container(
height: double.infinity,
padding: EdgeInsets.all(20),
child: Icon(Icons.call)
),
),
)
//PopupMenuButton widget
enum CallActionType { DataCall, Sim1Call, Sim2Call}
class callAction extends StatelessWidget {
Widget child;
String tooltip;
callAction({#required this.child, #required this.tooltip});
PopupMenuButton<CallActionType>(
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
onSelected: (CallActionType value) {
setState(() {
print(value);
});
},
//onCanceled didn't call
onCanceled: () {
print('You have not chossed anything');
},
tooltip: widget.tooltip,
offset: Offset(0, 100),
child: widget.child,
itemBuilder: (BuildContext context) => <PopupMenuEntry<CallActionType>>[
new PopupMenuItem<CallActionType>(
value: CallActionType,
child: Text('Action 1'),
),
new PopupMenuItem<CallActionType>(
value: CallActionType,
child: Text('Action 2'),
),
new PopupMenuItem<CallActionType>(
value: CallActionType,
child: Text('Action 3'),
),
],
);
PopupMenu will close smoothly, please see below code for example:
Widget popupMenuButton(){
return PopupMenuButton<String>(
elevation: 50,
padding: EdgeInsets.fromLTRB(5, 0, 0, 0),
icon: Icon(Icons.keyboard_arrow_down, size: 30, color: Colors.black),
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: "One_Val",
child: Text("One_Val"),
),
PopupMenuItem<String>(
value: "Two_Val",
child: Text("Two_Val"),
),
PopupMenuItem<String>(
value: "Three_Val",
child: Text("Three_Val"),
)
],
onSelected: (String value) {
setState(() {
companyName = value;
});
},
);}
Please let me know for any query, Thanks.

flutter alert dialog for updating value

I want to update value in alert dialog i am using following:
Future showAlert() async {
await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert in Dialog'),
content: Container(
height: 40.0,
width: 60.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_itemCount != 1
? new IconButton(
icon: new Icon(Icons.remove),
onPressed: () => setState(() => _itemCount--),
)
: new Container(),
new Text(_itemCount.toString()),
new IconButton(
icon: new Icon(Icons.add),
onPressed: () => setState(() => _itemCount++))
],
),
),
actions: <Widget>[
new FlatButton(
child: new Text('CANCEL'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
});
}
I am calling this function in Listview Builder
GestureDetector(
child: Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(Icons.add_box,
color: Color(0xFFfccd01)),
),
),
onTap: () {
showAlert();
/* FutureBuilder<String>(
future: Add_to_cart(USER_ID,
snapshot.data[index].id, "1"),
builder: (context, snapshot) {
print(snapshot.data);
});*/
},
),
But on + click my value of alert dialog is not going to update after i close and reopen it it will update but i want to update on tap of icon button.
You can use StreamBuilder to update within Dialog or that screen also on single event thru Streams
You must insert AlertDialog into Statefulll Widget
see this example:
class ShowDialog extends StatefulWidget {
#override
_ShowDialogState createState() => _ShowDialogState();
}
class _ShowDialogState extends State<ShowDialog> {
#override
Widget build(BuildContext context) {
return AlertDialog(
//your container
);
}
}
and call ShowDialog into showDialog()