I am new to flutter. And I'm gaining more and more knowledge in a flutter.
I make A login screen long before for my Project But Someone suggest that your login screen not be scrolled up words should stick in the same position.
Brief about my screen.--
I added singleChildScrollview.I want to stop scrolling
below is my login screen. dart
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Center(
child: SingleChildScrollView(
child: Container(
color: Colors.white12,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200,
child: Image.asset(
"assests/man.png",
fit: BoxFit.contain,
)),
SizedBox(height: 45),
emailField,
SizedBox(height: 25),
passwordField,
SizedBox(height: 35),
loginButton,
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Don't have an account ? "),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
RegistrationScreen()));
// Navigator.push(context, MaterialPageRoute(builder:(context)=>HomeScreen()));
},
child: Text(
"SignUp",
style: TextStyle(
color: Colors.redAccent,
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
)
],
),
],
),
),
),
),
),
),
);
Remove SingleChildScrollview
Like this
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Center(
child: Container(
color: Colors.white12,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200,
child: Image.asset(
"assests/man.png",
fit: BoxFit.contain,
)),
SizedBox(height: 45),
emailField,
SizedBox(height: 25),
passwordField,
SizedBox(height: 35),
loginButton,
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Don't have an account ? "),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
RegistrationScreen()));
// Navigator.push(context, MaterialPageRoute(builder:(context)=>HomeScreen()));
},
child: Text(
"SignUp",
style: TextStyle(
color: Colors.redAccent,
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
)
],
),
],
),
),
),
),
),
);
Add physics to SingleChildScrollView
return SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
// rest of the code here
);
Though i would not recommend it as if the screen size is small and if the keyboard opens up, a render overflow will occur.
Related
I know the question is simple but I am in doubt about creating a simple button, which directs to the initial page of user registration.
I'm inserting the code below, there are no errors but when compiling nothing appears, I have already tested it by changing other elements and they update but the new button created does not appear on the screen.
New Button:
Container(
height: 30,
alignment: Alignment.center,
child: SizedBox.expand(
child: TextButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Cadastre-se", style: TextStyle(color: Colors.black))
],
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return RegisterName();
},
),
);
})));
Current Code:
final button = Container(
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFFF18A00),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(8), bottomLeft: Radius.circular(8)),
),
child: SizedBox.expand(
child: TextButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Entrar", style: TextStyle(color: Color(0xFFFFFFFF)))
],
),
onPressed: _submitEmail)));
final forgotPassword = Container(
height: 40,
alignment: Alignment.center,
//child: FlatButton(
//style: TextStyle(color: Color(0xFF45CAD0))),
// onPressed: () => {},
);
return Scaffold(
backgroundColor: Color.fromRGBO(248, 248, 248, 1),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ListView(
//physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(left: 70, right: 70),
children: <Widget>[
logo,
SizedBox(height: 30),
email,
password,
button,
SizedBox(height: 20),
forgotPassword,
],
),
],
),
);
}
}
I tried to insert below the "Enter" button and nothing happened.
Where am I going wrong?
If I understand correctly, you want to figure out where to place the code for "New Button". In that case, assign your new button container to a variable like this:
final newButton = Container(
height: 30,
alignment: Alignment.center,
child: SizedBox.expand(
child: TextButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Cadastre-se", style: TextStyle(color: Colors.black))
],
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return RegisterName();
},
),
);
})));
Then, in your Current Code, you can put this variable inside the ListView like the other variables:
return Scaffold(
backgroundColor: Color.fromRGBO(248, 248, 248, 1),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ListView(
//physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(left: 70, right: 70),
children: <Widget>[
logo,
SizedBox(height: 30),
email,
password,
button,
newButton,
SizedBox(height: 20),
forgotPassword,
],
),
],
),
);
So your final "Current Code" will be:
final button = Container(
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFFF18A00),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(8), bottomLeft: Radius.circular(8)),
),
child: SizedBox.expand(
child: TextButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Entrar", style: TextStyle(color: Color(0xFFFFFFFF)))
],
),
onPressed: _submitEmail)));
final newButton = Container(
height: 30,
alignment: Alignment.center,
child: SizedBox.expand(
child: TextButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Cadastre-se", style: TextStyle(color: Colors.black))
],
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return RegisterName();
},
),
);
})));
final forgotPassword = Container(
height: 40,
alignment: Alignment.center,
//child: FlatButton(
//style: TextStyle(color: Color(0xFF45CAD0))),
// onPressed: () => {},
);
return Scaffold(
backgroundColor: Color.fromRGBO(248, 248, 248, 1),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ListView(
//physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(left: 70, right: 70),
children: <Widget>[
logo,
SizedBox(height: 30),
email,
password,
button,
newButton,
SizedBox(height: 20),
forgotPassword,
],
),
],
),
);
replace the Column with Center(child:... and give your scaffold background static color
Anybody how to do the layout similar to the image? I am having difficulty on the CardView and it position is lies between the body. I am still consider quite new to Flutter, having some difficulty in UI part. Full code is as below:
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: Size.fromHeight(45.0),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0.0,
centerTitle: true,
backgroundColor: Color(0xFFED2849),
leading: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 8.0),
child: GestureDetector(
onTap: (){
Navigator.of(context).pop(null);
},
child: Image.asset('assets/ic_user_title_back.png', width: 12.0, height: 12.0,),
),
),
],
),
title: Center(
child: Container(
child: Text(
'账号中心',
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 14),
),
),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: GestureDetector(
onTap: (){
//logout
},
child: Text(
'退出登陆',
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 11),
),
),
),
],
),
)
],
)
),
body: SafeArea(
top: false,
child: Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Color(0xFFED2849),
),
),
Expanded(
flex: 7,
child: Container(
color: Color(0xFFF1F1F1),
),
)
],
),
),
)
);
}
You can do this using Stack
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
// fit: StackFit.expand,
children: [
Column(
children: [
Expanded(
flex: 3,
child : Container(color: Colors.red)
),
Expanded(
flex: 7,
child: Container(
color : Colors.white)
)
]
),
Positioned(
top: MediaQuery.of(context).size.height * 0.2,
left: 20,
right: 20,
child:Card(
child: Padding(
padding : const EdgeInsets.all(16),
child: Text("Your Text here", ),
),)
)
],
)
Try using Stack() it will allow you to overlap several children in a simple way.
I am struggling to understand how to layout my widget so that they are occupying the entire yellow space. More specifically I would like that the "hero' and the "boss" widget expand to occupy the available space on screen (excluding the keyboard)
My current code achieve the following result
I would like to get the following result below
Here is my code. I have used resizeToAvoidBottomInset: true to ensure the widget is resized with the keyboard popping up
Widget build(BuildContext context) {
return Container(
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: kColorPrimary,
appBar: AppBar(
backgroundColor: kColorPrimaryLight,
title: Text('Time to Spell'),
),
body: ModalProgressHUD(
inAsyncCall: showSpinner,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(
height: 100,
color: Colors.amberAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text(
result,
textAlign: TextAlign.center,
style: kTitleTextStyle,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
child: Text(
'Timer: 2:00',
textAlign: TextAlign.center,
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
height: 279,
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Hero',
textAlign: TextAlign.center,
),
),
),
),
),
Expanded(
child: Container(
height: 279,
color: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Boss',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
],
),
),
),
],
),
),
))));
}
Try this. I have added comments as well. Feel free to comment if anything is not clear.
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.amberAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text(
"Click start",
textAlign: TextAlign.center,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
child: Text(
'Timer: 2:00',
textAlign: TextAlign.center,
),
),
),
],
),
Expanded(
child: Row(
children: <Widget>[
//child 1 of row takes half of the space
Expanded(
child: Column(
children: <Widget>[
//expanding the container to the bottom
Expanded(
child: Container(
//maximizing the width of the container
width: double.infinity,
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Hero',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
//child 2 of row takes half of the space
Expanded(
child: Column(
children: <Widget>[
//expanding the container to the bottom
Expanded(
child: Container(
//maximizing the width of the container
width: double.infinity,
color: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Boss',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
],
),
),
],
),
),
);
}
Apparently i tried to make a bottom button for checkout and it seems to be affecting how the body of the app is working. This only happened after i added the bottomnavbar padding etc
heres the link for the snip: https://imgur.com/a/sDhqasr
class _State extends State<CartOverviewScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Cart'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(child: Text('HI!'),)
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Card(
margin: EdgeInsets.all(15),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(width: 10,),
Chip(label: Text('\$0.00'),)
],
),
),
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
elevation: 8,
onPressed: () {},
color: colorCustom,
textColor: Colors.white,
child: Text('Checkout'),
),
),
],
),
),
);
}
}
you can also try this
class _State extends State<stat> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Cart'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text("Hi"),
),
)
],
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Card(
margin: EdgeInsets.all(15),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
width: 10,
),
Chip(
label: Text('\$0.00'),
)
],
),
),
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
elevation: 8,
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
child: Text('Checkout'),
),
),
],
),
),
);
}
}
Ahh i found my own answer actually, the problem was caused by bottomNavigationBar hogging the entire body of the app. i just needed to place the following code from below onto the bottomNavigationBar Column.
mainAxisSize: MainAxisSize.min
Current output:
Expected output:
Code:
SizedBox(
width: 380,
height: 180,
child: Swiper(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Expanded(
child: Card(
child: ListTile(
title: Text(
'${items[index].title}',
),
subtitle: Text(
'${items[index].body}',
),
trailing: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: HexColor("#0087a8"),
child: IconButton(
icon: Icon(Icons.add),
],
),
),
),
)
],
);
},
viewportFraction: 0.8,
scale: 0.9,
control: SwiperControl(color: Colors.white),
),
);
I am unable to create the icon button to be that way. As when i put in padding, it says that the pixels overflowed. I need to get the add button on the bottom right hand side.
As already pointed out, you shouldn't use a ListTile for this, as you want to use more than just a title, subtitle for your content.
The reason I've picked a Stack over a Column here, is that it allows you to safely use it in different size screens whilst assuring the view won't overflow. With Column, it would use the button diameter as the whole space to use (vertically), even though it is restrict to the right side of the box.
I believe this is what you're looking for.
class MyListTile extends StatelessWidget {
const MyListTile({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 180.0,
color: const Color(0xff0087a8),
child: Container(
padding: const EdgeInsets.all(20.0),
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: const Color.fromRGBO(19, 12, 117, 1.0),
),
child: Stack(
children: <Widget>[
Text(
'EUR - USD',
style: Theme.of(context).textTheme.display2.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Forex',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: const Color(0xff0087a8),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
size: 50.0,
),
),
)
],
),
),
);
}
}
Try this code
Container(
height: 180,
width: double.infinity,
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'EUR/USD',
style: TextStyle(fontSize: 40),
),
Text('FOREX', style: TextStyle(fontSize: 20)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.blueAccent,
child: IconButton(
onPressed: () {
print('On Pressed');
},
icon: Icon(Icons.add),
)),
],
)
],
),
),
),
)
Use custom widget for list item OR column from below code for single view. To align left and right you have to put your view in 'Align' as in below -
class _ItemsState extends State<Items> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SizedBox(
width: 380,
height: 160,
child: Card(
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return
Padding(padding: EdgeInsets.all(10.0),child: Column(children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Column(children: <Widget>[
Text(
'title',
style: TextStyle(fontSize: 20.0 , fontWeight: FontWeight.bold,),
),
Text(
'body',
style: TextStyle(fontSize: 14.0), )
]),
),
Align(
alignment: Alignment.centerRight,
child: CircleAvatar(
maxRadius: 20.0,
backgroundColor: Colors.blueGrey,
child: IconButton(
icon: Icon(Icons.add,
color: Colors.white,),
))
)
]));
}))));
}
}