flutter/dart: how to control the column size? - flutter

I need to display a set of options on a pop-up.
The issue that I am having is that the column is taking up all the space.
is there a way around this or another widget I should be using?
I tried using list view but it nothing ends up showing up
_displayJobTypeAlert(BuildContext context) {
return showDialog(
builder: (context) {
return AlertDialog(
title: Text('What type of job is this?'),
content: Column(
//shrinkWrap: true,
// ignore: prefer_const_literals_to_create_immutables
children: [
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Handyman');
},
child: const Text('Handyman'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Landscaping');
},
child: const Text('Landscaping'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Plumming');
},
child: const Text('Plumming'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Remodeling');
},
child: const Text('Remodeling'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Roofing');
},
child: const Text('Roofing'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Electrical');
},
child: const Text('Electrical'),
),
],
),
);
},
context: context,
);
}

Instruct the Column widget to take the minimum size it requires:
Column(
mainAxisSize: MainAxisSize.min,
children: [...]
)

I took out column
I used actions instead of children and it worked!
Future _displayJobTypeAlert(BuildContext context) {
return showDialog(
builder: (context) {
return AlertDialog(
elevation: 24.0,
title: Text('What type of job is this?'),
actions:
//Column(
//shrinkWrap: true,
// ignore: prefer_const_literals_to_create_immutables
//children:
[
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Handyman');
Navigator.pop(context);
},
child: const Text('Handyman'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Landscaping');
Navigator.pop(context);
},
child: const Text('Landscaping'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Plumming');
Navigator.pop(context);
},
child: const Text('Plumming'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Remodeling');
Navigator.pop(context);
},
child: const Text('Remodeling'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Roofing');
Navigator.pop(context);
},
child: const Text('Roofing'),
),
TextButton(
onPressed: () {
_updateJobField(_jobType, jobTypeColumn, 'Electrical');
Navigator.pop(context);
},
child: const Text('Electrical'),
),
],
//),
);
},
context: context,
);
}

Related

How to move slider scroll in the AlertDialog in Flutter?

The slider works fine outside the AlertDialog, but when I insert the slider into the content inside the AlertDialog, the display works fine, but it doesn't scroll. How do I solve this?
This is Image that AlertDialog with SfSlider
This is my code:
double _value = 40.0;
SfRangeValues _values = SfRangeValues(15.0, 35.0);
_showDialog() async {
await showDialog<String>(
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Text('총톤수'),
content: SizedBox(
width: 500,
height: 80,
child: SfRangeSlider(
min: 0.0,
max: 50.0,
values: _values,
interval: 10,
showLabels: true,
enableTooltip: true,
onChanged: (SfRangeValues values){
setState(() {
_values = values;
});
},
),
),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
),
);
This is GestureDetector:
GestureDetector(
onTap: () {
return _showDialog();
},
Thank you.
here is the problem, since alertdialog is a separate context, you have to wrap it with stateful and make it setstate, I edited your code.
_showDialog() async {
await showDialog<String>(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState2) {
return AlertDialog(
title: const Text('총톤수'),
content: SizedBox(
width: 500,
height: 80,
child: SfRangeSlider(
min: 0.0,
max: 50.0,
values: _values,
interval: 10,
showLabels: true,
enableTooltip: true,
onChanged: (SfRangeValues values) {
setState2(() {
_values = values;
});
},
),
),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
);
});
});
}

I want to use flutter to create a list that can be sorted

I'm working on a list in flutter that can be reordered.
However, I am getting an error.
I thought showDialog and builder were the cause of the error, so I turned off showDialog and tried again, but the error still occurred.
How to solve this problem or
How do I create a List using ReorderableListView.builder and showDialog?
I do not understand English, so some words and sentences may be wrong.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
// 最初に表示するWidget
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
// 右上に表示される"debug"ラベルを消す
debugShowCheckedModeBanner: false,
// アプリ名
title: 'My Todo App',
theme: ThemeData(
// テーマカラー
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
// リスト一覧画面を表示
home: TodoListPage(),
);
}
}
// リスト一覧画面用Widget
class TodoListPage extends StatefulWidget {
#override
_TodoListPageState createState() => _TodoListPageState();
}
class _TodoListPageState extends State<TodoListPage> {
// Todoリストのデータ
List<String> todoList = [];
void reorderData(int oldindex, int newindex) {
setState(() {
if (newindex > oldindex) {
newindex -= 1;
}
final items = todoList.removeAt(oldindex);
todoList.insert(newindex, items);
});
}
void sorting() {
setState(() {
todoList.sort();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
// AppBarを表示し、タイトルも設定
appBar: AppBar(
title: Text('List list'),
),
// データを元にListViewを作成
body: ReorderableListView.builder(
itemCount: todoList.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
for (final items in todoList)
GestureDetector(
onTap: () async {
// ダイアログを表示------------------------------------
showDialog(
context: context,
builder: (BuildContext context) {
return Column(
children: <Widget>[
AlertDialog(
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Column(
children: <Widget>[
TextButton.icon(
icon: const Icon(
Icons.add,
color: Colors.black,
),
label: const Text('Edit'),
onPressed: () {
sorting();
},
onLongPress: () async {
var morenewText =
await Navigator.of(context)
.push(
MaterialPageRoute(
builder: (context) =>
TodoAddPage(
todoList[index]),
),
);
setState(() {
todoList[index] = morenewText;
});
},
),
ElevatedButton(
child: const Text('Delete'),
onPressed: () {
setState(() {});
todoList.removeAt(index);
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
primary: Colors.blue,
),
),
ElevatedButton(
child: const Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
],
),
),
),
],
);
},
);
},
key: ValueKey(items),
child: ListTile(
title: Text(todoList[index]),
),
),
],
);
},
onReorder: reorderData,
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
// "push"で新規画面に遷移
// リスト追加画面から渡される値を受け取る
var newListText = await Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
// 遷移先の画面としてリスト追加画面を指定
return TodoAddPage(null);
}),
);
if (newListText != null) {
// キャンセルした場合は newListText が null となるので注意
setState(() {
// リスト追加
todoList.add(newListText);
});
}
},
child: Icon(Icons.add),
),
);
}
}
class TodoAddPage extends StatefulWidget {
final oldnama;
TodoAddPage(this.oldnama);
#override
_TodoAddPageState createState() => _TodoAddPageState();
}
class _TodoAddPageState extends State<TodoAddPage> {
var newname = '';
#override
Widget build(BuildContext context) {
if (widget.oldnama != null) {
newname = widget.oldnama;
}
return Scaffold(
appBar: AppBar(
title: Text('Add list'),
),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 入力されたテキストを表示
const SizedBox(height: 8),
// テキスト入力
TextFormField(
//テキスト入力の初期値を決める
initialValue: newname,
// 入力されたテキストの値を受け取る(valueが入力されたテキスト)
onChanged: (String value) {
// データが変更したことを知らせる(画面を更新する)
// データを変更
newname = value;
},
),
const SizedBox(height: 8),
Container(
// 横幅いっぱいに広げる
width: double.infinity,
// リスト追加ボタン
child: ElevatedButton(
onPressed: () {
// "pop"で前の画面に戻る
// "pop"の引数から前の画面にデータを渡す
Navigator.of(context).pop(newname);
},
child: Text('Add list', style: TextStyle(color: Colors.white)),
),
),
const SizedBox(height: 8),
Container(
// 横幅いっぱいに広げる
width: double.infinity,
// キャンセルボタン
child: TextButton(
// ボタンをクリックした時の処理
onPressed: () {
// "pop"で前の画面に戻る
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
),
],
),
),
);
}
}
You're using itemBuilder: wrong. Update it using this...
itemBuilder: (context, index) {
return ListTile(
key: ValueKey(todoList[index]),
onTap: () {
// ダイアログを表示------------------------------------
showDialog(
context: context,
builder: (BuildContext context) {
return Column(
children: <Widget>[
AlertDialog(
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Column(
children: <Widget>[
TextButton.icon(
icon: const Icon(
Icons.add,
color: Colors.black,
),
label: const Text('Edit'),
onPressed: () {
sorting();
},
onLongPress: () async {
var morenewText =
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
TodoAddPage(todoList[index]),
),
);
setState(() {
todoList[index] = morenewText;
});
},
),
ElevatedButton(
child: const Text('Delete'),
onPressed: () {
setState(() {});
todoList.removeAt(index);
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
primary: Colors.blue,
),
),
ElevatedButton(
child: const Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
],
),
),
),
],
);
},
);
},
title: Text(todoList[index]),
);
},

Positioning Grid-View in Flutter

I am new to flutter.I have a grid-view with multiple floating-action-buttons. Is there any way I can position my grid-view widget on the y-Axis. I want the grid-view-widget in the middle of the screen.
How can I position layouts in flutter in general ?
Thank you for your help
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GridView.count(
padding: const EdgeInsets.all(20),
crossAxisSpacing: 15,
mainAxisSpacing: 20,
crossAxisCount: 4,
children: <Widget>[
FloatingActionButton(
onPressed: () {
press_1_button();
},
child: Text("1"),)
,FloatingActionButton(
onPressed: (){
press_2_button();
},
child: Text("2"),)
,FloatingActionButton(
onPressed: () {
press_3_button();
},
child: Text("3"),)
,FloatingActionButton(
onPressed: (){
press_4_button();
},
child: Text("4"),)
,FloatingActionButton(
onPressed: () {
press_5_button();
},
child: Text("5"),)
,FloatingActionButton(
onPressed: (){
press_6_button();
},
child: Text("6"),)
,FloatingActionButton(
onPressed: () {
press_7_button();
},
child: Text("7"),)
,FloatingActionButton(
onPressed: (){
press_8_button();
},
child: Text("8"),)
,FloatingActionButton(
onPressed: () {
press_9_button();
},
child: Text("9"),)
],
),
),
);
}
}
Try wrapping it with padding
Padding(
padding:const EdgeInsets.only(top:20.0),
child:GridView(...)
)

flutter: how can I adjust the property of CupertinoAlertDialog?

I'm new in flutter. I want to adjust the dimensions and other properties like background color of the CupertinoAlertDialog. I have searched in the documents and tried some properties but didn't work. For background color example, I have tried to put it into a Container and set its color. Definitely it didn't work. So how can I achieve it? Thanks in advance.
Container(
color: Colors.red,
child: CupertinoAlertDialog(
title: Text('dropOut'), //对话框标题
content: SingleChildScrollView(
),
actions: [
CupertinoDialogAction(
child: Text('cancel'),
onPressed: () {},
),
CupertinoDialogAction(
child: Text('OK'),
onPressed: () {},
),
],
),
),
Edited: I tried the method suggested by #Salim Murshed, but it didn't seem work so well. here is my code and the display!
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
body: RaisedButton(
child: Text("Pick Me !!!"),
onPressed: () {
showDialog(
context: context,
builder: (_) => Center(
child: Container(
width: 270, height: 140,
color: Colors.red,
child: CupertinoAlertDialog (
title: new Text("Material Dialog"),
content: new Text("Hey! I'm Coflutter!"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.pop(_);
},
)
],
),
),
));
},
)
),
);
}
You can check the below code.
RaisedButton(
child: Text("Pick Me !!!"),
onPressed: () {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Material Dialog"),
content: new Text("Hey! I'm Coflutter!"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.pop(_);
},
)
],
));
},
)

How to deal with setState properly

void showSimpleCustomDialog(BuildContext context, String listName) async{
if(randList.isEmpty){
randList = await theDb.queryWhere("$listName");
}else{
randList.clear();
randList = await theDb.queryWhere("$listName");
}
setState((){
});
String randValue = "Click generate new to get a random value";
Dialog simpleDialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
child: Text(
"$randValue"
),
),
Padding(
child: Row(
children: <Widget>[
RaisedButton(
color: Colors.blue,
onPressed: ()
String lol = randList[0 + rng.nextInt(randList.length - 0)].getItem();
print(randValue);
setState(() {
randValue = lol;
});
},
child: Text(
'generate new',
style: TextStyle(fontSize: 18.0, color: Colors.white),
),
)
],
),
),
],
),
),
);
showDialog(
context: context, builder: (BuildContext context) => simpleDialog);}
When I am clicking on "generate new" button I want to update my randomValue and to display that randomValue as Text Widget. To do that dynamically Im using setState, but it is not working, and i dont understand why. Please help me.
You should use StatefulBuilder with dialogue.
showDialog(
context: context,
builder: (context) {
String contentText = "Content of Dialog";
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: Text("Title of Dialog"),
content: Text(contentText),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.pop(context),
child: Text("Cancel"),
),
FlatButton(
onPressed: () {
setState(() {
contentText = "Changed Content of Dialog";
});
},
child: Text("Change"),
),
],
);
},
);
},