Related
I'm trying to use Align(alignment: Alignment.bottomCenter, but it's not working. From the class I took to do this, all he had was a sized box to fit it at the bottom of the screen. But that isn't working for different screen sizes..
Here is everything inside SingleChildScrollView. RichText is near the bottom. (Changed from register screen to my login screen because it has less code).
Widget build(BuildContext context) => SingleChildScrollView(
padding: EdgeInsets.symmetric(vertical: 45, horizontal: 50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 50),
Image(
image: AssetImage('assets/image.jpg'),
),
SizedBox(height: 50),
TextFormField(
style: TextStyle(color: Colors.white),
controller: emailController,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
hintText: "Enter Email",
hintStyle: TextStyle(color: Color(0xFFD6D6D6)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: 4),
TextFormField(
style: TextStyle(color: Colors.white),
controller: passwordController,
obscureText: isHiddenPassword,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
hintText: "Enter Password",
hintStyle: TextStyle(color: Color(0xFFD6D6D6)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
suffixIcon: InkWell(
onTap: _togglePasswordView,
child: Icon(
isHiddenPassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: Colors.white),
),
),
),
SizedBox(height: 20),
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size.fromHeight(40),
primary: Colors.white,
),
child: Text(
'Sign In',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFF162242)),
),
onPressed: signIn,
),
SizedBox(height: 20),
SignInButton(
Buttons.Facebook, onPressed: () {},
text: "Sign in with Facebook",
),
SizedBox(height: 16),
SignInButton(
Buttons.Google,
text: "Sign in with Google",
onPressed: () {
signInWithGoogle();
},
),
SizedBox(height: 20),
GestureDetector(
child: Text(
'Forgot Password?',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
decoration: TextDecoration.underline,
color: Colors.white,
),
),
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ForgotPasswordPage(),
)),
),
// SizedBox(
// height: 100),
Align(
alignment: Alignment.bottomCenter,
child: RichText(
text: TextSpan(
style: TextStyle(color: Color(0xFFD6D6D6), fontSize: 20),
text: 'No account? ',
children: [
TextSpan(
recognizer: TapGestureRecognizer()
..onTap = widget.onClickedSignUp,
text: 'Sign Up',
style: TextStyle(
decoration: TextDecoration.underline,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
],
),
);
Thank you for your time!
You can use Spacer to push the child till the end of the Column like so:
Column(
children: [
Container(
height: 200,
color: Colors.black,
),
Container(
height: 200,
color: Colors.green,
),
Spacer(),
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Already have an account?',
style: TextStyle(color: Colors.black),
children: [
TextSpan(
text: 'Sign In',
)
],
),
),
],
)
i'm stuck trying to design a text widget that have empty Text Field like below:
If you have an idea how to do this, I would be grateful
You can use rich text to achieve this
RichText(
text: TextSpan(
children: [
TextSpan(text: "some really big text which will have a textfield like this"),
WidgetSpan(child: Container(
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.orange
),
child:TextField(
style:TextStyle(fontSize:12))
)),
TextSpan(text:" to enter some text in between a text"),
]
)
)
You may have to align items. But this should work
Center(
child: RichText(
text: TextSpan(
text:
'Grout crack happens mainly due to movement between two surfaces. It can be as a ',
style: TextStyle(
color: Colors.black,
fontSize: 40,
fontWeight: FontWeight.bold),
children: [
TextSpan(
text: 'thin',
style: TextStyle(
color: Colors.red,
fontSize: 35,
fontStyle: FontStyle.italic)),
TextSpan(
text: ' of humidity',
style: TextStyle(color: Colors.black, fontSize: 40)),
]),
),
),
The Width of the Elevated Button is not reducing, it is coming in taking all the width on the screen.The parent widget is ListView.I have even tried to reduce it through ButtomTheme but still it is not working. I have added the code below. Everywhere I have seen the way to reduce the width is this way.But don't know why it is not reducing the width
ListView(
children: [
Row(
children: [
RotatedBox(
quarterTurns: 3,
child: Padding(
padding: const EdgeInsets.only(right: 30.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontFamily: 'Pacifico'),
),
),
),
SizedBox(
width: 20,
),
Text(
'BRUXTER',
style: TextStyle(
fontSize: 30,
fontFamily: 'RockSalt',
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
SizedBox(
height: 50,
),
Form(
child: Column(
children: [
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Name',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
width: MediaQuery.of(context).size.width *
0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
],
You need to replace your ListView with Column
Column(
children: [
Row(
children: [
RotatedBox(
quarterTurns: 3,
child: Padding(
padding: const EdgeInsets.only(right: 30.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontFamily: 'Pacifico'),
),
),
),
SizedBox(
width: 20,
),
Text(
'BRUXTER',
style: TextStyle(
fontSize: 30,
fontFamily: 'RockSalt',
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
SizedBox(
height: 50,
),
Form(
child: Column(
children: [
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Name',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
width: MediaQuery.of(context).size.width *
0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
],
)
Please refer to below code
Replace width with margin in Container widget
Container(
// Replace width with margin
margin: EdgeInsets.symmetric(horizontal: 80.0,),
// width: MediaQuery.of(context).size.width *
// 0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
Complete code
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView(children: [
Row(
children: [
RotatedBox(
quarterTurns: 3,
child: Padding(
padding: const EdgeInsets.only(right: 30.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white, fontSize: 50, fontFamily: 'Pacifico'),
),
),
),
SizedBox(
width: 20,
),
Text(
'BRUXTER',
style: TextStyle(
fontSize: 30,
fontFamily: 'RockSalt',
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
SizedBox(
height: 50,
),
Form(
child: Column(
children: [
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Name',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
// Replace width with margin
margin: EdgeInsets.symmetric(
horizontal: 80.0,
),
// width: MediaQuery.of(context).size.width *
// 0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
]);
}
}
Instead of using Column, I would actually recommend staying with ListView for performance reasons in most cases.
You could also fix this issue by wrapping the Container in a Center widget (or an Align if you want a different alignment than centered).
These widgets provide loose constraints to their children so they can be any size they want, but no larger than the parent, which is exactly what you want in this case.
It wasn't working in your case, because the ListView forces children to take up the entire width, so what size the direct children want to take up is ignored.
I am showing a simple list view builder in bottom sheet like this
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 16.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Select ',
style: new TextStyle(
fontSize: 16,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'Patient',
style: TextStyle(
fontSize: 16,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 13),
child: Container(
height: MediaQuery.of(context).size.height * 0.08,
width: MediaQuery.of(context).size.width * 0.92 ,
child: TextFormField(
onChanged: (value) {
},
onSaved: (value) {},
style: TextStyle(
fontSize: 15,
color: kPrimaryColor,
fontFamily: 'UbuntuRegular'),
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide:
const BorderSide(color: Color(0xffbdbdbd), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
enabledBorder: new OutlineInputBorder(
borderSide:
const BorderSide(color: Color(0xffbdbdbd), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
filled: true,
hintStyle: new TextStyle(
color: Color(0xffbdbdbd), fontFamily: 'UbuntuRegular'),
hintText: "Search",
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: kPrimaryColor, width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
Container(
child: new ListView.builder(
itemCount: 8,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 10, left: 15, right: 15),
child: Container(
child: GestureDetector(
// onTap: widget.onPressed,
onTap: () {},
child: Stack(children: [
Container(
width: double.infinity,
padding: EdgeInsets.all(15.0),
margin: EdgeInsets.only(bottom: 15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
border: Border.all(
color: kPrimaryColor,
width: 1.0,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Name : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'Hamza Tariq',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Contact : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: '03323789263',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
],
),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Gender : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'Male',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Reg Date : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: '12-MAY-2021',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular',
color: textGreyColor)),
],
),
),
],
),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Patient ID : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'C-200',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular',
color: textGreyColor)),
],
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Email : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'abc.33#hotmail.com',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular',
color: textGreyColor)),
],
),
),
],
),
],
),
),
]),
),
),
);
},
)
,
)
],
),
);
}
);
The issue is when i scroll the search bar and my header is also scrolling because I add SingleChildScrollView on the whole bottom sheet. What I need to do is I need to just scroll the listView not the whole content inside the bottom sheet. If I remove SingleChildScrollView from the bottom sheet it's showing an overflow error. Need to know what can I do here so I can get a scrollable listView with a sticky search bar and header.
Remove SingleChildScrollView and add Expanded on ListView.builder like this:
Dartpad to run the code online.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xff003859),
appBar: AppBar(
title: Text(
"Conversor de moedas 360",
style: TextStyle(
color: Color(0xff003859)
)
),
backgroundColor: Color(0xffffa300),
),
body: FutureBuilder<Map>(
future: getData(),
builder: (context, snapshot) {
switch(snapshot.connectionState){
case ConnectionState.none:
case ConnectionState.waiting:
return Center(
child: Text(
"Carregando Dados...",
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
),
textAlign: TextAlign.center,
)
);
default:
if (snapshot.hasError){
return Center(
child: Text(
"Erro ao carregar dados...",
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
),
textAlign: TextAlign.center,
)
);
} else {
dolar = snapshot.data["results"]["currencies"]["USD"]["buy"];
euro = snapshot.data["results"]["currencies"]["EUR"]["buy"];
return Column(
children: <Widget>[
Image.asset(
"images/360Tecnologia.jpg",
fit: BoxFit.fitWidth,
),
SingleChildScrollView(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: "Reais",
labelStyle: TextStyle(
color: Color(0xffffa300),
),
border: OutlineInputBorder(),
prefixText: "R\$ "
),
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
)
),
Divider(),
TextField(
decoration: InputDecoration(
labelText: "Dólares",
labelStyle: TextStyle(
color: Color(0xffffa300),
),
border: OutlineInputBorder(),
prefixText: "U\$ "
),
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
)
),
Divider(),
TextField(
decoration: InputDecoration(
labelText: "Euros",
labelStyle: TextStyle(
color: Color(0xffffa300),
),
border: OutlineInputBorder(),
prefixText: "€ "
),
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
)
),
Divider(),
TextField(
decoration: InputDecoration(
labelText: "Libra",
labelStyle: TextStyle(
color: Color(0xffffa300),
),
border: OutlineInputBorder(),
prefixText: "£\$ "
),
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
)
),
Divider(),
TextField(
decoration: InputDecoration(
labelText: "Bitcoin",
labelStyle: TextStyle(
color: Color(0xffffa300),
),
border: OutlineInputBorder(),
prefixText: "BTC "
),
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
)
),
Divider(),
TextField(
decoration: InputDecoration(
labelText: "Bitcoin",
labelStyle: TextStyle(
color: Color(0xffffa300),
),
border: OutlineInputBorder(),
prefixText: "BTC "
),
style: TextStyle(
color: Color(0xffffa300),
fontSize: 25.0
)
),
],
)
)
],
);
}
}
}
)
);
}
}
I want to show an image on top below the top bar. The image is fixed.
Below the top bar I have any text field inside the SingleChildScrollView widget, but this not work when I try to scroll the elements.
The text field can't rolling when I roll the screen to up or to down.
The stackoverflow want I type more text because I put many code, but my doubt is explained on text up...
Any help?
To address the singleChildScrollView issue, you can wrap that in an Expanded widget and that will solve that problem. Though, you may want to look into using a SliverList for what you're doing if you want the image to be up top and fixed in the app bar.
Column(
children: <Widget>[
replace that with:
Stack(
children: <Widget>[
You are seeing that error because your SingleChildScrollView is inside a Column.
Another solution is to wrap your Parent Column with SingleChildScrollView instead of second one. But that will scroll your image too.
Or, if your image is a fixed one, you can add that to AppBar bottom:
AppBar(
//...
bottom: PreferredSize(
preferredSize: Size.fromHeight(129.0),
child: Image.asset(
"images/360Tecnologia.jpg",
fit: BoxFit.fitWidth,
),
),
),
Of course in this case if your snapshot.hasError or when connection is waiting, you will see this image(You can have a condition like isDataAvailable and make it true when connection state done and check it in bottom).
Another way is wrap parent Column with another SingleChildScrollView but that will make two scroll views. So to avoid image (Outher scroll view) to not to scroll add scrollPysics: NeverScrollPhysics()(But I dont recommend unnecessary wrap with extra widget).