How to avoid overflow by using SingleChildScrollView - flutter

I am very new with flutter and im very stuck in a positioning.
Does anybody know where should I place the "SingleChildScrollView"? I get stack overflow 148PX.
my code looks like this,i tried in all the posible ways, but i still didnt managed how to fix it.
I can't understand where should i put the body :
class SignUp extends StatefulWidget {
#override
_SignUpState createState() => _SignUpState();
}
class _SignUpState extends State<SignUp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
alignment: Alignment.bottomCenter,
width: 400,
height: 350,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/images/qlogo1.png'))),
),
SizedBox(height: 1),
Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
children: [
TextField(
style: mediumTextStyle(),
decoration: textFieldInputDecoration('username'),
),
TextField(
style: mediumTextStyle(),
decoration: textFieldInputDecoration('password'),
),
],
),
),
SizedBox(
height: 25,
),
// creaza spatii intre containere
Container(
alignment: Alignment.centerRight,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 37, vertical: 8),
child: Text(
'Forgot Password?',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Quicksand',
decoration: TextDecoration.underline),
)),
),
SizedBox(height: 24),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 70,
padding: EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xFFF06292), const Color(0xff2A75BC)]),
borderRadius: BorderRadius.circular(30),
),
child: Text(
'Sign In',
style: mediumTextStyle(),
),
),
SizedBox(
height: 16,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 70,
padding: EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: Text('Register',
style: TextStyle(
color: Colors.black87,
fontFamily: 'Quicksand',
fontSize: 17)),
),
],
),
);
}
}
Thank you!

If you want all you screen to be scrolled - do this:
return Scaffold(
body: SingleChildScrollView(
child: Column(
// your other code
)
)
);

Related

Lost my keyboard when wrapping a container in a container

I'm trying to learn Flutter. I took an Udemy course and now I'm trying to follow along on a Youtube Tutorial Chat App.
In the section, I've created a sign in screen. The sign in screen is all pushed up to the top of the body: (At this point the keyboard works as its suppose to) To correct the top alignment, the instructor has us wrap the top container (in the body:) in another container and add alignment: Alignment.bottomCenter,. This moves the Textfield() and buttons to the bottom on the screen. But, I no longer get the keyboard in the emulator when clicking the "email" or "password" fields. The instructor shows he has a keyboard error at this point (although his keyboard shows up on his emulator and mine does not) To correct this error, he wraps the new container in a SingleChildScrollView(). and adds the line height: MediaQuery.of(context).size.height - 50, to the container just inside SingleChildScrollView(. At this point his screen in aligned properly and his keyboard works as it should. While my screen is aligned correctly, the keyboard still doesn't work.
any suggestions?
import 'package:flutter/material.dart';
import 'package:flutter_docktalk/widgets/widgets.dart';
class SignIn extends StatefulWidget {
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: mainAppBar(context),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height - 50,
alignment: Alignment.bottomCenter,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
style: simpleTextStyle(),
decoration: textFieldInputDecoration('Email'),
),
TextField(
style: simpleTextStyle(),
decoration: textFieldInputDecoration('Password'),
),
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.centerRight,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Forgot Password?',
style: simpleTextStyle(),
),
),
),
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30)),
child: const Text(
'Sign In',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
const SizedBox(
height: 16,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30)),
child: const Text(
'Sign In With Google',
style: TextStyle(color: Colors.black87, fontSize: 18),
),
),
const SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Don't have an account? ",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
Text(
"Register Now",
style: TextStyle(
color: Colors.white,
fontSize: 17,
decoration: TextDecoration.underline,
),
)
],
),
const SizedBox(
height: 45,
),
],
),
),
),
),
);
}
}
*body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),*

background image changing animation flutter

I'm new to flutter and try to learn while developing apps on my own. I have created a get started screen using one background image. I want to change 2-3 background images while the other texts and get started button remain same. how can I do that using flutter. please refer the below code. appreciate your help on this.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class GetStarted extends StatelessWidget {
const GetStarted({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child:
Image.asset('assets/images/person1.png', fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
Padding(
padding: const EdgeInsets.only(left: 40,bottom: 230 ),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Meet \nYour Doctor\nHere', style:TextStyle(
height: 1.2,
fontFamily: 'Dubai',
fontSize: 35,
color:Color(0xffFAFAFA),
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(left: 30,top: 26),
child: Align(
alignment: Alignment.topLeft,
child: Text('DOCTOR', style:TextStyle(
fontFamily: 'Dubai',
fontSize: 30,
color:Colors.white,
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(bottom: 60),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 320,
height: 65,
child: ElevatedButton(
onPressed: () {
},
child: Text('Get Started',style:TextStyle(color:Colors.white,fontSize:25, fontWeight: FontWeight.normal),
),
style:ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Color(0xff05ABA3)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
),
)
)
),
)
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
),
height: 5,
width: 120,
)
)
),
],
),
),
);
}
}

How to create image slider in flutter

I'm new to flutter and trying to learn some basic concepts. I want to add 3 background images to this same screen to slide automatically while all the text and buttons remaining the same. how can I do this using flutter. do I need to add 3 different pages to do this?? or can I do it in same file. appreciate your help on this.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class GetStarted extends StatelessWidget {
const GetStarted({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
//color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.4,
child:
Image.asset('assets/images/person1.png', fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
Padding(
padding: const EdgeInsets.only(left: 40,bottom: 230 ),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Meet \nYour Doctor\nHere', style:TextStyle(
height: 1.2,
fontFamily: 'Dubai',
fontSize: 35,
color:Color(0xffFAFAFA),
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(left: 30,top: 26),
child: Align(
alignment: Alignment.topLeft,
child: Text('DOCTOR', style:TextStyle(
fontFamily: 'Dubai',
fontSize: 30,
color:Colors.white,
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(bottom: 60),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 320,
height: 65,
child: ElevatedButton(
onPressed: () {
},
child: Text('Get Started',style:TextStyle(color:Colors.white,fontSize:25, fontWeight: FontWeight.normal),
),
style:ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Color(0xff05ABA3)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
),
)
)
),
)
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
),
height: 5,
width: 120,
)
)
),
],
),
),
);
}
}
I think you use this package: carousel_slider
Official link: https://pub.dev/packages/carousel_slider
Blog link: https://androidride.com/flutter-carousel-slider-example/
Thank You

Add materialRoute at the ontap function

I try to open another page that I design on flutter but I get an error at the end of the code , at the brackets ( at the onTap(){}) what should I add in the brackets next to the ElementPageDetail? And also , why can't I add another container in the SingleChildScrollView that I created? It's because of the Stack? Expanded?
class _ElementMainPageState extends State<ElementMainPage> {
PageController _pageController = PageController(viewportFraction: 0.7);
double _indicatorHeight = 35.45;
int _pageIndex = 0;
List<String> _heroTag = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
List<String> _heroTextTag = List.generate(10, (index) => "t$index");
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
Expanded(
flex: 8,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: 160,
top: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (_) =>
ElementDetailPage()));
},
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"Unknown Stage",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
))
And the ElementDetailPage
import 'package:flutter/material.dart';
class ElementDetailPage extends StatefulWidget {
String imageTag;
String titleTag;
ElementDetailPage(this.imageTag, this.titleTag);
#override
_ElementDetailPageState createState() => _ElementDetailPageState();
}
class _ElementDetailPageState extends State<ElementDetailPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: Hero(
tag: widget.imageTag,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover)),
padding: EdgeInsets.only(left: 24),
child: ListView(
children: [
SizedBox(
height: 100,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 64,
width: 64,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
borderRadius: BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
],
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
Text(
"Unknown stage",
style: TextStyle(
fontSize: 64,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
""
"Unknown stage is the first fase to know somebody new."
" It is the easiest stage to see if you like the person in front of you "
"and if you want to continue forming a bound with them to become friends or"
"\n if there aren't your type of a person and let them go.This question will have some "
" basic questions and some intimate questions, if somebody wants to skip a question i propose a shot"
" \n WARNING : You may fall in love",
style: TextStyle(color: Colors.white),
),
],
),
),
)),
Positioned(
left: 16,
top: 32,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
onPressed: () {
Navigator.of(context).pop();
},
)),
Positioned(
top: 600,
left: 100,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.white30],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Start playing",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 15),
),
),
),
)),
Positioned(
top: 700,
left: 100,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.black87],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Spotify Playlist",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15),
),
),
),
))
],
),
);
}
}
In _ElementMainPageState() --> Wrap the Expanded widget inside the MaterialApp -> Scaffold Widget to resolve the navigating issue
And main thing is ElementDetailPage() too warp with Scaffold widget
For the error showed up in this error message:
In your ElementDetailPage, you are setting 2 positional arguments. By definition, these arguments need to be provided when you create a new ElementDetailPage.
To answer your question, you need to put the value of imageTag and titleTag, within the bracket. If you don't want to make these arguments compulsory, you can define them as optional parameters by putting them in the curly bracket:
class ElementDetailPage extends StatefulWidget {
String imageTag;
String titleTag;
ElementDetailPage({this.imageTag, this.titleTag});
#override
_ElementDetailPageState createState() => _ElementDetailPageState();
}

How to add circular border to dialog in flutter?

How to add circular border for dialog box in a flutter?,I tried the below code but I can't able to get the desired output, I already added circular border but it's not working, I need circular border for dialog,Refer the expected output for details, please guide
My code :
`
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
])));
}
}
`
My expectation:
current output:
Just need to add ClipBehavior to Dialog.
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias, // add clipBehavior
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
]),
);
}
}
The issue was with the Container you used to wrap the other widgets, you can add specific border radius to each container to fix.
I added a demo and code to get what you wanted your output to look like:
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 340,
child: Column(
children: [
Container(
height: 60,
width: double.infinity,
padding: EdgeInsets.all(
15.0,
),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
15.0,
),
topRight: Radius.circular(
15.0,
),
),
),
child: Text(
'Baby Names',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'List Names',
style: TextStyle(
fontSize: 18,
),
),
),
),
),
Divider(
color: Colors.grey[200],
thickness: 1.5,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(
fontSize: 18,
color: Colors.green,
),
),
),
),
],
),
),
);
}
}
RESULT:
You added RoundedRectangleBorder(),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
padding: EdgeInsets.only(
top: 10.0,
bottom: 5,
left: 5,
right: 5,
),
margin: EdgeInsets.only(top: 5),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
Text(
"Baby",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
),
),
Divider(color: Colors.grey,),
SizedBox(height: 16.0),
Text(
"text",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(height: 24.0),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.of(context).pop(); // To close the dialog
},
child: Text("buttonText"),
),
),
],
),
),
);
}
}