How to remove the column space between Card ?
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample"),
),
body: Column(
children: <Widget>[
Card(
child: Padding(
padding: EdgeInsets.all(15),
child: Text("Card 1"),
)),
Card(
child: Padding(padding: EdgeInsets.all(15), child: Text("Card 2")),
)
],
),
);
}
Output
By default, the card widget has a default margin set to 4.0 logical pixels , to eliminate the spaces, you can adjust the default margin to your preference:
I added a demo using your widget tree as an example:
Column(
children: <Widget>[
Card(
// set the margin to zero
margin: EdgeInsets.zero,
child: Text("Card 1"),
),
Card(
// set the margin to zero
margin: EdgeInsets.zero,
child: Text(
"Card 2",
),
)
],
),
The error is because you using. padding: EdgeInsets.all(15) in your card. You Can alloy padding only on the required sides.
In the card try adding margin:EdgeInsets.zero
Card(
margin: EdgeInsets.zero,
),
The default margin in Flutter is 4.0 pixels on all sides. To change this set
margin: EdgeInsets.zero
To learn more about margins go here
Related
I have an issue with the whole screen scrolling in Flutter. Only the Expanded widget is able to scroll on-screen in my app but I want to make the whole screen scrollable. How can I do that? Here is my code e.g.
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(
'My App',
style: AppTheme.of(context).title1,
),
elevation: 0,
backgroundColor: Colors.amber,
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 20, 10, 0),
child: Column(
. // Padding repeats two more times
.
.
.
Expanded(
child: MyWidget(
myProp1: value1,
myProp2: value2,
myProp3: value3,
myProp4: value4,
myProp5: value5,
myProp6: value6
) // MyWidget
), // Expanded
],
), // Column
); // Scaffold
}
I've tried to wrap Column with SingleChildScrollview widget but it didn't work for me. I guess I can not use Expanded widget in SingleChildScrollview. I also tried to use Container or etc. instead of Expanded and Column widgets but I couldn't solve this issue. Can anybody help me with it?
There is no need to wrap MyWidget with Expanded. Just Change Column into ListView:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(
'My App',
),
elevation: 0,
backgroundColor: Colors.amber,
),
body: ListView(
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 20, 10, 0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 500,
decoration: BoxDecoration(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 500,
decoration: BoxDecoration(color: Colors.black),
),
)
],
))
],
), // Column
); // Scaffold
}
You also can use the SingleChildScroll view as Child of Expanded widget will work fine
I would like to horizontally center the trailing icon of my expansionTile,
Here is my expansionTile with the trailing on the bottom right :
I already tried to encapsulate the Icon in a Align and a Container but doesn't work, I also tried Padding but it's not stable if you change the size of the screen.
Code with Align :
trailing : Align(
alignment: Alignment.center,
child: Icon(
BeoticIcons.clock,
color: BeoColors.lightGreyBlue
)
),
With Container :
trailing: Container(
alignment: Alignment.center,
child: Icon(
BeoticIcons.clock,
color: BeoColors.lightGreyBlue
)
),
Thanks for your help.
This will work for you. Use LayoutBuilder to get parent widget width, and set relative padding using constraints. For example, use constraints.maxWidth * 0.5, to center across width. Your padding will be stable if you change the size of the screen:)
trailing: LayoutBuilder(builder: (ctx, constraints) {
return Padding(
padding: EdgeInsets.only(
right: constraints.maxWidth * 0.5,
),
child: Icon(
Icons.menu,
),
);
}),
you can use column and align your icon like this way hope this code will help you, thank you
import 'package:flutter/material.dart';
class Hello extends StatelessWidget {
const Hello({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 140,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.deepPurple[200],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Center(child: Text("Hello")),
Text("Hello"),
SizedBox(height: 50,),
Align(
alignment: Alignment.center,
child: Icon(Icons.lock_clock))
],
),
),
),
),
),
);
}
}
Ok, I found how to do it.
Simply put the icon in the title attribute of the ExpansionTile :
return ExpansionTile(
title: Icon(
BeoticIcons.simply_down,
color: BeoColors.lightGreyBlue,
),
I am trying to build a registration screen, the concept that I have designed on adobe XD is that the registration Screen will have the app logo in the top center, a card with approximately 3-4 textfields/areas, a button in the bottom center. Since there will be multiple cards to fill I want a circular page indicator in the center to make it easier for the user to track the remaining data to fill as well as the user wont have to fill a really long list in a single screen.
What I have tried is
A SingleChildScrollView with a column inside it and the column has the first registration form to fill and another column inside it that has the button with the page indicator
A Stack and a pageviewbuilder this gave me the best results in terms of layout but the only issue is that when using the keyboard the widgets will throw a renderFlew overflow
and right now a listview with the form in it and a column that has the button and the page indicator
Things that I need:
the keyboard to not cause an issue with form
the code to be practical and consistent for multiple screen sizes
my latest code
#override
Widget build(BuildContext context) {
List<Widget> registrationForms = [EmailRegistrationForm()];
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: ListView(
children: <Widget>[
Align(alignment: Alignment.center, child: registrationForms[0]),
Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5),
child: InkWell(
child: Text("Already have an account? Login!"),
),
),
PrimaryStyledButton(text: "Next", onPress: () {}),
CirclePageIndicator(
currentPageNotifier: _currentPageNotifier,
itemCount: registrationForms.length,
selectedDotColor: Theme.of(context).accentColor,
)
],
),
),
],
));
}
what is expected
so this is what ended up working for me, I realized that the list view is kinda useless so the structure became as follows:
SingleChildScrollView that has a sized box (size of the screen) and a column inside the sized box, the SingleChildScrollView is to stop the issue of the keyboard pushing things up as well giving the ability to scroll while filling the data
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 10),
child: landingScreen.getLogoWidget(),
),
Expanded(
child: Align(
alignment: Alignment.center, child: registrationForms[0]),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5),
child: InkWell(
child: Text(ALREADY_REGISTERED_MSG),
),
),
PrimaryStyledButton(text: NEXT, onPress: () {
}, ),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: CirclePageIndicator(
currentPageNotifier: _currentPageNotifier,
itemCount: registrationForms.length,
selectedDotColor: Theme.of(context).accentColor,
),
)
],
),
),
],
),
),
));
Try using SingleChildScrollView with expanded widget
#override
Widget build(BuildContext context) {
List<Widget> registrationForms = [EmailRegistrationForm()];
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: SingleChildScrollView(
child: Expanded(
child: Column(
children: <Widget>[
Align(alignment: Alignment.center, child: registrationForms[0]),
Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5),
child: InkWell(
child: Text("Already have an account? Login!"),
),
),
PrimaryStyledButton(text: "Next", onPress: () {}),
CirclePageIndicator(
currentPageNotifier: _currentPageNotifier,
itemCount: registrationForms.length,
selectedDotColor: Theme.of(context).accentColor,
)
],
),
),
],
),
),
),
);
}
I'm attempting to layout some buttons in a flutter app towards the bottom of the screen as seen here:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: true,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/foo.jpeg'),
fit: BoxFit.cover),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10),
child: _buttonsOne(),
),
Expanded(
child: Text(''),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
child: _buttonsTwo(),
),
],
),
),
);
Counter buttons is setup thusly:
Widget _buttonsTwo() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_oneButton(),
_twoButton(),
_threeButton(),
_fourButton()
],
);
}
My problem is two of the buttons are using glyphs that cause them to be just right of center. Prior to attempting this layout I structured raised buttons with columns so that I could use an Align to pull these icons to the left a bit, as seen here for one of the buttons:
Widget _threeButton() {
return RaisedButton(
onPressed: () {},
elevation: 10,
color: Colors.red,
textColor: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Align(
alignment: Alignment(-0.4, 0),
child: Icon(
Class.icon_name,
size: 30,
),
),
Text(
_fooCount.toString(),
style: TextStyle(fontSize: 25),
)
],
),
);
}
And here's the result I'm getting:
As you can see, the icons for the two rightmost buttons are still a little to the right. I've tried using RaisedButton.icon to no avail as it causes the icons to overlap the text, even restructuring them in a row to try and make wider buttons. What am I missing?
Try using Transform widget instead of Align and translate the X axis:
Transform(
transform: Matrix4.identity()..translate(-7.0),
child: Icon(
FiveRingsDB.conflict_political,
size: 30,
),
),
Text(
_militaryCount.toString(),
style: TextStyle(fontSize: 25),
)
So I am wanting to change the header height of the drawer, as my intention for the drawer to be a settings page. But at the moment it is to thick. How would I do this. This is my sample code so far:
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Settings'),
),
]
)
);
You can Wrap Your Widget with Container.
Container(
height: 50.0,
child: DrawerHeader(
child: Text('Setting'),
),
),
return new Container(
height : 100.0 // your specified height
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Settings'),
),
]
)
);