I would like to create a Registration page in which I have set all textfield in the center and now I want to fix bottom line "Already have an account, Let's play it.." which is loginLink object.
return Scaffold(
//resizeToAvoidBottomPadding: false,
backgroundColor: Colors.green,
body: Container(
child: Column(
children: <Widget>[
new Expanded(
child: Center(
child: Container(
color: Colors.yellow,
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.only(left: 24.0, right: 24.0, top: 70.0),
children: <Widget>[
logo,
SizedBox(height: 48.0),
fullname,
SizedBox(height: 16.0),
email,
SizedBox(height: 16.0),
contactNo,
SizedBox(height: 16.0),
password,
SizedBox(height: 16.0),
c_password,
SizedBox(height: 16.0),
address,
SizedBox(height: 16.0),
signupButton
],
),
),
),
),
Container(
child: loginLink,
margin: EdgeInsets.only(bottom: 10.0),
color: Colors.red,
),
],
),
),
);
I want to fix loginLink object.
Just warp your top Container in SingleChildScrollView. By this you also can scroll your link container too while keyboard is open. and set your ListView physics: NeverScrollableScrollPhysics(),
Related
I need to set height of a card based on the dynamic data.My card does not shows the entire content in the card.
Card(
child: Container(
padding: EdgeInsets.all(7.0),
child: Wrap(
direction: Axis.horizontal,
spacing: 200.0, // gap between adjacent chips
runSpacing: 0.0,
children: <Widget>[
Container(
height: 40.0,
decoration: new BoxDecoration(
color: Colors.grey[800],
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0),
),
),
child: Column(
children: <Widget>[
Align(
child: Container(
padding: EdgeInsets.fromLTRB(5, 0, 0, 0),
margin: const EdgeInsets.all(8.0),
child: Text(
contactUs.title,
style: Theme.of(context).textTheme.headline,
),
),
),
],
)),
Container(
padding: EdgeInsets.all(3.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Container(
child: Column(
children: <Widget>[
subtitlesLength > 0
? _listSubtitleSection(contactUs.subtitles)
: Container(),
],
),
),
),
Container(
child: Column(
children: <Widget>[
contactUs.addresses.length > 0
? _listAddressSection(contactUs.addresses)
: Container(),
],
),
),
contactUs.email != ''
? Container(
child: GestureDetector(
child: Text(
'Email: ' + contactUs.email,
style: new TextStyle(
color: Theme.of(context).primaryColor,
height: 1.5,
decoration: TextDecoration.underline,
),
),
onTap: () {
_launchURL(contactUs.email);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
margin: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
child: Container(
child: Column(
children: <Widget>[
contactUs.links.length > 0
? _listLinksSection(contactUs.links)
: Container(),
],
),
),
),
Container(
child: Column(
children: <Widget>[
Divider(
color: Theme.of(context).accentColor,
),
FlatButton(
color: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.place,
color:
Theme.of(context).primaryColor),
Text(
'Show on maps',
style: TextStyle(
color:
Theme.of(context).primaryColor),
),
],
),
onPressed: () {
launchMap(contactUs.map);
}),
],
),
),
],
),
),
],
),
),
)
I am getting half of my data loaded in the card, remaining content is not displayed. I tried to place height for the container inside the card, but that is not working.
I need help to sort this out. Any help is appreciated.
Thanks in advance.
Removing the itemExtent property of listView builder solved the issue.
Am building a navigation Drawer in flutter, with some items on top and some items on the bottom of the drawer. But in ListView, am unable to add Column widget on the bottom of the Drawer. I had even tried expanded, but that didn't resolved the problem.
Drawer(
child: ListView(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
padding: const EdgeInsets.only(bottom: 10),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 30),
CircleAvatar(
radius: 45,
child: Text(
'AC',
style: TextStyle(fontSize: 40),
),
),
],
),
),
],
),
),
Divider(),
Column(children: _drawerOptions),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
AppStrings.termsAndConditions,
style: TextStyle(
fontSize: 16.0,
color: Color.fromARGB(255, 39, 39, 39),
),
)
],
),
)
],
),
);
That last widget Column wrapped with Expanded was to put that Column at bottom of the Drawer, but that's not happening.
Can anyone suggest any solution?
You should do it the other way, put ListView inside Column using Expanded , here is the full working code.
Drawer(
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
padding: const EdgeInsets.only(bottom: 10),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 30),
CircleAvatar(
radius: 45,
child: Text(
'AC',
style: TextStyle(fontSize: 40),
),
),
],
),
),
],
),
),
Divider(),
Expanded(child: ListView(children: _drawerOptions)),
Spacer(),
Text("Terms and conditions"),
],
),
),
I am new in Flutter so I want to know that how can I set a width to match parent layout width
new Scaffold(
body: new Container(
decoration: new BoxDecoration(color: AppColors.hoBlue),
child: Padding(
padding: EdgeInsets.all(20.0),
child: new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.all(20.0),
child: Card(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0.0, 20.0,20.0),
child: Column(
children: <Widget>[
Card(
elevation: 10.0,
child: Padding(
padding: EdgeInsets.all(20.0),
child:
Text("Sign Up Here"),
),
),
TextField(
decoration: InputDecoration(
labelText: "Email",
hintText: "example#mail.com",
),
autofocus: true,
),
TextField(
decoration: InputDecoration(
labelText: "Password",
),
autofocus: true,
),
SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(
color: AppColors.hoBlue,
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
onPressed: () => print('Sign In'),
),
)
],
)),
),
),
),
],
)
],
),
],
)),
),
));
Result From Code Above
i need help to make card stack with parent like
Result I want
i already try with using stack but the result card parent card overlaping the first card.
I know about little bit on Expanded tag but Expanded expand view to both direction, i dont know how to do it. Help me if you know, Thanks in Advance.
You don't need Stack to get that view - it can be done using Column & Material widget.
return Scaffold(
body: new Container(
decoration: new BoxDecoration(color: Colors.blue),
child: new Center(
child: MergeSemantics(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Material(
elevation: 24.0,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Sign Up Here"),
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10.0, 20.0, 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: "Email",
hintText: "example#mail.com",
),
autofocus: true,
),
TextField(
decoration: InputDecoration(
labelText: "Password",
),
autofocus: true,
),
SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(
color: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
onPressed: () => print('Sign In'),
),
)
],
)),
],
),
),
],
),
),
)),
));
Output:
If you want to resize or alter the card view Then just put Card inside the Container view then adjust your container size.
This link will help you :https://stackoverflow.com/a/50017126/7418129
Just Put Card in Container
Padding(
padding: EdgeInsets.all(20),
child: Container(
height: 50,
width: double.infinity,
child: Card(
child: Align(
alignment: Alignment.centerLeft,
child: Text("Edit Profile")),
),
),
)
Use Material widget that will use as same as card do...and take always a full width and height as same as its parent class...
I have a stack contains two texts .. sometimes one of the text is really long and it will be in two lines like this:
So i tried to use FittedBox like this:
new Container(
height: 44.0,
decoration: BoxDecoration(
borderRadius: BorderRadius
.all(const Radius
.circular(30.0)),
border: new Border.all(
color:
Color(0xff606060),
width: 2.5),
),
child: new Stack(
children: <Widget>[
Align(
alignment: globals
.currentLang ==
'ar'
? Alignment
.centerRight
: Alignment
.centerLeft,
child: Padding(
padding:
EdgeInsets.only(
right: 15.0,
left: 15.0),
child: FittedBox(
fit: BoxFit
.contain,
child: Text(
),
),
),
),
Align(
alignment: globals
.currentLang ==
'ar'
? Alignment
.centerLeft
: Alignment
.centerRight,
child: Padding(
padding:
EdgeInsets.only(
left: 15.0,
right:
15.0),
child: new Text(
),
),
),
],
),
),
and i got this result:
I want a space between the two texts so it will not be covered by each other .. how to solve this?
UPDATE:
UPDATE 2:
Check this solution if it is ok for you to scale only text aligned to the right.
Container(
height: 44.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(const Radius.circular(30.0)),
border: Border.all(color: Color(0xff606060), width: 2.5),
),
padding: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Text('Some text'),
SizedBox(width: 8.0),
Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
'Demo text. Long demo text. Duplicated long demo text.',
textAlign: TextAlign.end
)
)
)
],
),
)
UPDATE:
Flex instead of Row and Expanded looks better. Check it out
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(child: Text('10%'), flex: 0, fit: FlexFit.tight,),
SizedBox(width: 8.0),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
'Demo text. Demo text. Demo text. Demo text. Demo text.',
textAlign: TextAlign.start
),
)
)
],
)
i have just started learning how to develop apps in flutter...
but i have something to ask about:
am trying to place some widgets at specific place of the screen in all screens..
for example here's my code:
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: Column(
children: [
Container(
padding: EdgeInsets.only(top: 50.0),
child: new Image.asset(
'assets/images/walk1ar.png',
fit: BoxFit.cover,
height: 30.0,
width: 169.0,
alignment: Alignment.center,
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 30.0, bottom: 5.0),
child: new Image.asset(
'assets/images/walkside.png',
fit: BoxFit.cover,
height: 445.0,
width: 14.0,
alignment: Alignment.centerRight,
),
),
Container(
padding: EdgeInsets.only(
top: 30.0, bottom: 5.0, left: 50.0, right: 50.0),
child: new Image.asset(
'assets/images/walkpic1.png',
fit: BoxFit.cover,
height: 445.0,
width: 250.0,
alignment: Alignment.center,
),
),
Container(
padding: EdgeInsets.only(top: 30.0, bottom: 5.0),
child: new Image.asset(
'assets/images/walkside.png',
fit: BoxFit.cover,
height: 445.0,
width: 14.0,
alignment: Alignment.centerLeft,
),
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
'اهلاً وسهلاً',
style:
new TextStyle(fontSize: 20.0, color: Color(0xFF49C275)),
)),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.only(bottom: 5.0),
child: Text(
'أهلا وسهلا بكم في معرض وظائف ٢٠١٨',
style:
new TextStyle(fontSize: 14.0, color: Color(0xFF707070)),
)),
],
),
new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
child: new RaisedButton(
child: const Text(
'إبدأ',
),
color: Color(0xFF49C275),
elevation: 71.0,
splashColor: Colors.blueGrey,
onPressed: () {
// Perform some action
},
),
)
],
),
],
)),
);
}
here i want the last widget which is the button to be at the bottom of the screen always ... also the walkside image .. i want one to stick to the right side of the screen and the other to the left always..
how to do so?
You can use stack and align your button to the end of the screen. Here is an example:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: width,
height: 40.0,
child: RaisedButton(
color: azulClaro,
child: Text(
'My Button',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
],
);