fluttersinglechildscrollview
Viewport for the textbox is not showing properly using singlechildscrollview in flutter
hi guys to all who can help me figure my code,
import 'package:flutter/material.dart';
import 'package:survey/widgets/widgetlist.dart';
import 'dart:ui' as ui;
class Item {
Item(this.name);
String name;
}
class createnewsurv extends StatefulWidget {
@override
_createnewsurvState createState() => _createnewsurvState();
}
class _createnewsurvState extends State<createnewsurv> {
TextEditingController _textcontroller = new TextEditingController();
int surveyquestionnum = 1;
Item selectedUser;
List<Item> users = <Item>[
Item('Sample 1'),
Item('Sample 2'),
Item('Sample 3'),
Item('Sample 4'),
];
List<Item> users2 = <Item>[
Item('Sample EMOJI 1'),
Item('Sample EMOJI 2'),
Item('Sample EMOJI 3'),
Item('Sample EMOJI 4'),
];
@override
Widget _dropdownbutton (List<Item> userlist){
return Container(
padding: EdgeInsets.all(1),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.all(
Radius.circular(15.0)
),
),
child: DropdownButton<Item>(
underline: SizedBox(),
isExpanded: true,
icon: Icon(Icons.arrow_drop_down),
hint: Text(" SELECT FROM DROPDOWN"),
value: selectedUser,
onChanged: (Item Value) {
setState(() {
selectedUser = Value;
});
},
items: userlist.map((Item user) {
return DropdownMenuItem<Item>(
value: user,
child: Row(
children: <Widget>[
SizedBox(width: 10,),
Text(
user.name,
style: TextStyle(color: Colors.black),
),
],
),
);
}).toList(),
),
);
}
Widget build(BuildContext context) {
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _height = logicalSize.height;
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("CREATE A NEW SURVEY ",style: txtttitsize),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(" SURVEY TITLE",style: txtttitsize),
),
_dropdownbutton(users),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(" SELECT EMOJI SET",style: txtttitsize),
),
_dropdownbutton(users2),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(" SURVEY QUESTION #$surveyquestionnum",style: txtttitsize),
),
TextFormField(
autocorrect: true,
controller: _textcontroller,
maxLines: 10,
onSaved: (value){
},
validator: (val){
if(val.isEmpty){
return "This page Cannot be Blank!";
}else{
return null;
}
},
decoration: InputDecoration(
labelText: "QUESTION",
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25)
)
),
)
]
),
),
)),
);
}
}
this is an incomplete code, but if you noticed and tried running this, it will show 2 dropdown widget which for some reason when i select it crash showing ''there should be exactly one item with [DropDownButton]'s Value: error,
and the next one is the textform field, which i am hoping when i wrapped it on singlescrollview when somebody type it should or let the viewport focus its screen to the textbox while typing, but its already on the third line and its already blocked by the keyboard,
i may be wrong but how can i use singlescrollview properly on this? or if there is an alternative widget to give this textbox a chance to be viewed properly by the user while they type?
Update
This error appears after clicking any drop down button. I updated the code with the suggested answer and its still the same for me .
Solution
You can copy paste run full code below
Two _dropdownbutton use the same selectedUser cause this error
You can use List<Item> selectedUser = [null, null]; to keep result
and pass index to function like this _dropdownbutton(users, 0)
code snippet
Widget _dropdownbutton(List<Item> userlist, int index) {
...
child: DropdownButton<Item>(
underline: SizedBox(),
isExpanded: true,
icon: Icon(Icons.arrow_drop_down),
hint: Text(" SELECT FROM DROPDOWN"),
value: selectedUser[index],
onChanged: (Item Value) {
setState(() {
selectedUser[index] = Value;
});
},
...
_dropdownbutton(users, 0),
_dropdownbutton(users2, 1),
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
//import 'package:survey/widgets/widgetlist.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';
class Item {
Item(this.name);
String name;
}
class createnewsurv extends StatefulWidget {
@override
_createnewsurvState createState() => _createnewsurvState();
}
class _createnewsurvState extends State<createnewsurv> {
TextEditingController _textcontroller = new TextEditingController();
int surveyquestionnum = 1;
List<Item> selectedUser = [null, null];
List<Item> users;
List<Item> users2;
@override
void initState() {
users = <Item>[
Item('Sample 1'),
Item('Sample 2'),
Item('Sample 3'),
Item('Sample 4'),
];
users2 = <Item>[
Item('Sample EMOJI 1'),
Item('Sample EMOJI 2'),
Item('Sample EMOJI 3'),
Item('Sample EMOJI 4'),
];
super.initState();
}
@override
Widget _dropdownbutton(List<Item> userlist, int index) {
return Container(
padding: EdgeInsets.all(1),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
child: DropdownButton<Item>(
underline: SizedBox(),
isExpanded: true,
icon: Icon(Icons.arrow_drop_down),
hint: Text(" SELECT FROM DROPDOWN"),
value: selectedUser[index],
onChanged: (Item Value) {
setState(() {
selectedUser[index] = Value;
});
},
items: userlist.map((Item user) {
return DropdownMenuItem<Item>(
value: user,
child: Row(
children: <Widget>[
SizedBox(
width: 10,
),
Text(
user.name,
style: TextStyle(color: Colors.black),
),
],
),
);
}).toList(),
),
);
}
Widget build(BuildContext context) {
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _height = logicalSize.height;
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"CREATE A NEW SURVEY ",
),
SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
" SURVEY TITLE",
),
),
_dropdownbutton(users, 0),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
" SELECT EMOJI SET",
),
),
_dropdownbutton(users2, 1),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
" SURVEY QUESTION #$surveyquestionnum",
),
),
TextFormField(
autocorrect: true,
controller: _textcontroller,
maxLines: 10,
onSaved: (value) {},
validator: (val) {
if (val.isEmpty) {
return "This page Cannot be Blank!";
} else {
return null;
}
},
decoration: InputDecoration(
labelText: "QUESTION",
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25))),
)
]),
),
)),
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: createnewsurv()),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}