Related
So Basically the issue i am facing is I need to provide equal amount of spacing from the left side and the right side of the screen
The code of my file is attached below the code is in flutter
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class PhoneNumberDetails extends StatefulWidget {
const PhoneNumberDetails({super.key});
#override
State<PhoneNumberDetails> createState() => _PhoneNumberDetailsState();
}
class _PhoneNumberDetailsState extends State<PhoneNumberDetails> {
TextEditingController countryCode = TextEditingController();
#override
void initState() {
// TODO: implement initState
countryCode.text = '+91';
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Verify Number',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
body: Container(
alignment: Alignment.center,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/otpimage.png',
height: 150,
width: 150,
),
Text(
'Phone Verification',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Text('Please enter your mobile number to get started'),
SizedBox(
height: 25,
),
Container(
height: 55,
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.grey),
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 10,
),
SizedBox(
width: 40,
child: TextField(
controller: countryCode,
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
Text(
"|",
style: TextStyle(fontSize: 33, color: Colors.grey),
),
SizedBox(
width: 10,
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone",
),
),
),
],
),
),
SizedBox(
height: 20,
),
SizedBox(
width: double.infinity,
height: 45,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade600,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: Text('Send Code'),
onPressed: () {
Navigator.pushNamed(context, 'verify');
},
),
),
],
),
),
),
);
}
}
Basically i need the output in the following way
The output of this code is:
You can include padding on the scaffold body. while you are using Container widget, you can use padding of it.
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(16), //this
child: SingleChildScrollView(
child: Column(
Wrap your Row and ElevatedButton inside Padding
Padding(
padding: EdgeInsets.only(horizontal:16.0),
child: Row(...),
),
Padding(
padding: EdgeInsets.only(horizontal:16.0),
child:ElevatedButton(...)
)
Use Padding Widget :
Padding(
padding: const EdgeInsets.all(8.0),
child: "YOUR WIDGET",
),
Add Padding to Your Container or SingleChildScrollView like below
Container(
// padding: EdgeInsets.all(16), or use this
alignment: Alignment.center,
child: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Column(),
),
),
Your Result->
Simply Wrap your Row and ElevatedButton inside a Padding.
I am trying to make a quiz system where i have to take the input from the user in the text field and show in the Text Widget. I am trying to take the input in the text field but after that how to to style it in the Text Widget to show like in image
return Column(
children: [
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3,
),
child: Container(
child: Center(
child: TextField(
decoration: InputDecoration(
// border: InputBorder.none,
hintText: "Type a Question...",
hintStyle: TextStyle(
fontSize: 25,
),
),
),
),
),
),
],
);
And how to create the options like when i click on add the option it will show a above option field which i can type the options and then is also converted to the text widget
GestureDetector(
onTap: () {
if (!hasSolved) {
setState(() {
hasSolved = true;
solvedOption = 2;
});
}
},
child: Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: hasSolved && solvedOption == 2
? Colors.white
: Colors.transparent,
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: hasSolved && solvedOption == 2
? Icon(
Icons.check,
size: 15,
color: Color(0xffFFC700),
)
: SizedBox(
width: 15,
height: 15,
),
)
],
),
Text(
"Maybe?",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(),
if (hasSolved)
Container(
constraints: BoxConstraints.expand(
height: 40,
width: 50,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
child: Center(
child: Text(
"44%",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
],
),
),
),
You will have to use Stack widget along with TextInputField & Text widget. At a time, only one of TextInputField or Text will be visible.
Whatever use enters in TextInputField, will be shown in the Text widget.
The variables to be used:
bool typing = false;
final controller = TextEditingController();
The Widget:
Stack(
children: <Widget>[
InkWell(
onTap: startTyping,
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(24),
color: Colors.red,
child: Visibility(
visible: !typing,
child: Container(
margin: const EdgeInsets.all(20),
child: Text(controller.text.isEmpty ? 'Type a question' : controller.text,
style: TextStyle(color: Colors.white),
),
),
),
),
],
),
The startTyping method:
void startTyping() {
setState(() {
typing = true;
});
showDialog(
context: context,
builder: (context) {
return WillPopScope(
onWillPop: () async {
setState(() {
typing = false;
});
return Future.value(true);
},
child: AlertDialog(
insetPadding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
content: GestureDetector(
onTap: () {
Navigator.of(context).pop();
setState(() {
typing = false;
});
},
child: Container(
alignment: Alignment.center,
color: Colors.transparent,
child: Wrap(
children: [
TextField(
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Type a question',
hintStyle: bold30Hint,
),
controller: controller,
autofocus: true,
maxLines: 10,
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
backgroundColor: Colors.transparent,
elevation: 0,
),
);
},
);
}
After reading your question, this is what my understanding.
You want to add the answer options dynamically just by adding the text in TextField widget and by tapping the + button, it has to add in the form of a list items as shown in the image right?
Whatever the text you entered and tapping on + button it should create a text tile as per your requirement?
If the above points are correct, then the solution is simple.
Solution:
Create an empty List List<String> inputs = new List<String>();
Then add the text from TextField OnChanged Parameter to the above list.
Finally create ListView.builder to display the list of options as you need.
Check the official link from Flutter team on displaying the list items. https://flutter.dev/docs/cookbook/lists/long-lists
In the above link, they created an example of generating numbers using List.generate. All you have to do is to replace that with your List of inputs data getting from TextField widget. Hope it helps, if not let me know.
What am trying to achieve is move my TextField to view-able area when keyboard pop up, also I want a widget(Text widget) that is aligned bottom center to remain in there and get hidden by keyboard.
My Code:
#override
Widget build(BuildContext context) {
//databaseHelper.initializeDatabase();
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BOM'),
),
body: Builder(builder: (BuildContext context) {
return Container(
child: Stack(children: <Widget>[
//SingleChildScrollView widget tried here, result was a failure
Container(
margin: EdgeInsets.only(bottom: 100.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
selection = '5-co';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-co'
? Colors.green
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'COMPONENTS',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
),
Container(
width: 30.0,
),
GestureDetector(
onTap: () {
setState(() {
selection = '5-nl';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-nl'
? Colors.blue
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'REXIN',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
)
],
),
),
// SizedBox(height: 50,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: TextField(
controller: controller,
decoration: InputDecoration(
labelText: 'Enter article:',
hintText: 'eg: 3290-BR',
prefixIcon: Icon(Icons.local_offer),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
//if (value.length >= 4) {
navigateToList(controller.text, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
//
}),
/*enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.green)),*/
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0)),
),
onSubmitted: (value) {
//if (value.length >= 4) {
navigateToList(value, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
// Text('Oops, please give me more details !')));
},
),
),
]),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(' P A N D U',
style: TextStyle(
color: Colors.green,
fontSize: 30.0,
fontWeight: FontWeight.bold)),
))
]));
}));
}
Currently my TextField containing widget is in a container under stack widget and is aligned to center by column widget attribs.
WHAT I TRIED:
I referred some questions in here and tried SingleChildScrollView widget under my stack, and result was my container under the SingleChildScrollView widget loses its column axis attribs and get aligned to top of body.
What I didn't tried to solve my issue is with animations to move widget up. I will go for it if there isn't any other method, cause I gotta learn about those widgets which is still in que. ;')
I made SingleChildScrollView widget under my stack for all my widgets except the bottom wText widget, which I don't want to see when keyboard pops up. And then I just hide my Text widget using flutter's Visibility widget when keyboard comes in screen. This completely solved my problem (I used keyboard_visibility: ^0.5.5 library to get keyboard info, that tells when to hide or show my Text widget in the bottom ).
For reference my unsorted whole code:
bool _visible = true;
#override
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool keyvisible) {
//print('keyboard $visible');
setState(() {
_visible = !keyvisible;
});
},
);
}
#override
Widget build(BuildContext context) {
//databaseHelper.initializeDatabase();
return Scaffold(
//resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BOM'),
),
body: Builder(builder: (BuildContext context) {
return Center(
child: Stack(children: <Widget>[
SingleChildScrollView(
padding: EdgeInsets.all(8.0),
//margin: EdgeInsets.only(bottom: 100.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200.0,
),
Container(
margin: EdgeInsets.only(bottom: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
selection = '5-co';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-co'
? Colors.green
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'COMPONENTS',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
),
Container(
width: 30.0,
),
GestureDetector(
onTap: () {
setState(() {
selection = '5-nl';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-nl'
? Colors.blue
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'REXIN',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
)
],
),
),
// SizedBox(height: 50,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: TextField(
textInputAction: TextInputAction.search,
controller: controller,
decoration: InputDecoration(
labelText: 'Enter article:',
hintText: 'eg: 3290-BR',
prefixIcon: Icon(Icons.local_offer),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
//if (value.length >= 4) {
navigateToList(controller.text, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
//
}),
/*enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.green)),*/
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0)),
),
onSubmitted: (value) {
//if (value.length >= 4) {
navigateToList(value, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
// Text('Oops, please give me more details !')));
},
),
),
]),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Visibility(
visible: _visible,
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: ' P A N D U',
style: TextStyle(
color: Colors.green,
fontSize: 30.0,
fontWeight: FontWeight.bold)),
TextSpan(text: '\t v', style: TextStyle(color: Colors.white70, fontSize: 10.0, fontWeight: FontWeight.bold)),
TextSpan(text: '0.02.05', style: TextStyle(color: Colors.white70, fontSize: 11.0, fontStyle: FontStyle.italic))
])),
),
))
]));
}));
}
I want to expand a TextField to cover all the space vertically, its Container is expanding but TextField doesn't, here is design:
Blue is the Container area. but TextField is not expanding
This is the code I am using:
Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Title"),
Container(
margin: EdgeInsets.only(top: 8),
child: TextField(
controller: c_title,
decoration: Styles.getInputFieldStyle(""),
),
),
Container(
margin: EdgeInsets.only(top: 16),
child: Text("Feedback"),
),
Expanded(
child: Container(
color: Colors.blue,
margin: EdgeInsets.only(top: 8),
child: TextField(
decoration: Styles.getInputFieldStyle(""),
controller: c_feedback,
keyboardType: TextInputType.multiline,
),
),
),
Container(
margin: EdgeInsets.only(top: 16),
width: double.infinity,
child: RaisedButton(
onPressed: (){_onSubmitPressed();},
child: Text("Submit"),
textColor: Colors.white,
color: MyColors.theme_red,
),
)
],
),
);
With Flutter 1.5.4 you can do simply the following:
Expanded(
child: TextField(
expands: true,
maxLines: null,
),
)
It will occupy all vertical free space.
You need this.
TextFormField(
decoration: InputDecoration(hintText: "Enter your very long text here"),
maxLines: double.maxFinite.floor(),
),
Edit: This is the final solution for you.
Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Title"),
Container(
margin: EdgeInsets.only(top: 8),
child: TextField(
controller: c_title,
decoration: Styles.getInputFieldStyle(""),
),
),
Container(
margin: EdgeInsets.only(top: 16),
child: Text("Feedback"),
),
Expanded(
child: LayoutBuilder(
builder: (_, __) {
return Container(
color: Colors.blue,
margin: EdgeInsets.only(top: 8),
child: TextField(
decoration: Styles.getInputFieldStyle(""),
controller: c_feedback,
maxLines: double.maxFinite.floor(),
keyboardType: TextInputType.multiline,
),
);
},
),
),
Container(
margin: EdgeInsets.only(top: 16),
width: double.infinity,
child: RaisedButton(
onPressed: () {
_onSubmitPressed();
},
child: Text("Submit"),
textColor: Colors.white,
color: MyColors.theme_red,
),
)
],
),
),
Below code can help you -
Use "maxLines" and "keyboardType: TextInputType.multiline" to expand text fields
new Container(
child: TextFormField(
textAlign: TextAlign.start,
style: new TextStyle(
fontSize: 14.0, color: Colors.black),
keyboardType: TextInputType.multiline,
focusNode: nodeTwo,
textInputAction: TextInputAction.next,
maxLines: 4,
maxLength: 200,
decoration: InputDecoration(
labelText: 'Add Description',
alignLabelWithHint: true ,
hintText: 'Enter Description',
hintStyle: TextStyle(fontWeight:
FontWeight.w300,fontSize: 14.0),
errorStyle: TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
)
Just set maxLines to null:
TextField(
maxLines: null,
),
If your textField widget is Column's children widget and set expands: true .
Can set textAlignVertical: TextAlignVertical.top to vertical align text in the top.
I am designing a login screen with a login and password TextFormfields, and also an Inkwell, which navigates to a Register page. I am basically trying to place a container which has a text widget('My Apps Version Number') at the bottom of my screen, But it doesn't seem to be working. My widgets are in a Column which are embedded in a SingleScrollView. The issue seems to be creeping from the Expanded widget. Some help would be humbly welcome.
#override
Widget build(BuildContext context) {
return new WillPopScope(
onWillPop: _onWillPop,
child: new Scaffold(
key: _scaffoldKey,
resizeToAvoidBottomPadding: false,
body: Container(
color: Colors.blueGrey[900],
child: Center(
child: SingleChildScrollView(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
'assets/images/op.png',
height: 60.0,
color: Colors.blueGrey[100],
),
new Container(
margin: EdgeInsets.all(40.0),
child: new Column(children: [
Form(
key: this.formKey,
child: new Column(children: <Widget>[
//Username Field
Container(
margin: EdgeInsets.only(bottom: 20.0),
child: new TextFormField(
// Retrieve the text the user has typed in using our TextEditingController
controller: myEmailController,
keyboardType: TextInputType.emailAddress,
style: TextStyle(
fontSize: 18.0,
color: Colors.blueGrey[100]),
decoration: new InputDecoration(
labelText: 'Email address',
hintStyle: TextStyle(
color: Colors.blueGrey[100],
)),
validator: (val) =>
validateEmail(val.trim()),
onSaved: (val) => _email = val.trim(),
),
),
//Password Field
new TextFormField(
// Retrieve the password the user has typed in using our TextEditingController
controller: myPasswordController,
obscureText: true,
style: TextStyle(
fontSize: 18.0,
color: Colors.blueGrey[100]),
decoration: new InputDecoration(
labelText: 'Password',
hintStyle: TextStyle(
color: Colors.blueGrey[100],
)),
validator: validatePassword,
onSaved: (val) => _password = val,
),
new Container(
width: 350,
height: 50,
margin: EdgeInsets.only(top: 50.0),
child: new FlatButton(
color: Colors.blueGrey[800],
child: new Text(
"Sign In",
style: TextStyle(
color: Colors.blueGrey[200],
fontSize: 18),
),
onPressed: () {
_submit(context);
},
shape: new RoundedRectangleBorder(
// side: BorderSide(color: Colors.white),
borderRadius:
new BorderRadius.circular(30.0))),
),
new Container(
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.all(15.0),
child: new InkWell(
onTap: () {
Navigator.of(context)
.pushNamed('/register');
},
child: new Center(
child: new Text(
'New User? Sign Up...',
style: new TextStyle(
fontSize: 16.0,
color: Colors.blueGrey[200]),
),
),
),
),
])),
]),
),
new Expanded(
child: new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: Colors.red,
margin: const EdgeInsets.all(0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
padding: EdgeInsets.all(15),
child: new Text(
"Version - " + version,
style: TextStyle(
fontSize: 15,
color:
Colors.blueGrey[200]))))
],
),
),
))
])))))));
}