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'),
),
]
)
);
Related
If I use the following structure in the Scaffold:
body: Container(
alignment: Alignment.center,
child:
Text('Test')
)
Then the text is vertically and centrally structured, as I want. But if I do the following:
body: Container(
alignment: Alignment.center,
child:
ListView(
children:people.map(person).toList(),
),
)
Then the ListView is stuck to the top left of the body and isn't centered.
Why is that, and how can I center the ListView the same way that Text was centered?
Vertical
body: Container(
alignment: Alignment.center,
child:
ListView(
shrinkWrap: true,
children:people.map(person).toList(),
),
)
Horizontal
ListView(
shrinkWrap: true,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('text'),
],
),
Text('text'),
Text('text'),
],
),
It's because ListView take all the space available. To tell Listview to take only children sizes, add property "shrinkWrap" to true.
Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Center(
child: Text("Hello world !"),
),
],
),
)
I'm re-writing a simple app which calculates averages. However, I have a hard time with a TextField. I would like it to be exactly as on a first screenshot.
The TextField's width is stretched, I don't want that. I want it to be exactly as it is on the screenshot.
Desired look:
What I have:
Code:
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
class ArithmeticAverageScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('arithmetic_average_title').tr(),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Card(
child: Container(
padding: EdgeInsets.symmetric(vertical: 20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.help),
title: Text('arithmetic_average_help').tr(),
subtitle: Text('arithmetic_average_help_content').tr(),
)
],
),
)
),
SizedBox(height: 16.0),
Card(
child: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('arithmetic_average_your_grades', style: Theme.of(context).textTheme.headline5).tr(),
SizedBox(height: 16.0),
Text('arithmetic_average_grades_one_at_a_time', style: Theme.of(context).textTheme.headline6,).tr(),
SizedBox(height: 16.0),
Text('arithmetic_average_grade', style: Theme.of(context).textTheme.subtitle2).tr(),
TextField()
],
),
),
)
],
),
)
);
}
}
This will help you make generic width on all devices, so here width * 0.3 means it will take 30% of the screen width
Container(
width: MediaQuery.of(context).size.width * 0.3,
child: TextField(),
)
Use Row Widget, and put Expanded Widget as child Widget and inside that put your widgets, as Expanded will take up equal space.
return Row(
children: [
Expanded(
child: TextField();
),
Expanded(
child: Button();
)
],
);
When ever you want to play with height and width you can use the widget Container.If you want to play with a property which cannot found in the widget you are using wrap it with a widget with that property will help you.
Container(
margin: const EdgeInsets.only(right: 150),
child: new TextField(
decoration: new InputDecoration(
hintText: 'Grade',
)
)
)
You can try to wrap your TextField and Button with two Flexible widgets and apply desired proportions, e.g. 1:2 which would give you following result:
Row(
children: [
Flexible(
flex: 1,
child: TextField(),
),
Flexible(
flex: 2,
child: RaisedButton(
child: Text('Hello'), onPressed: () {}),
)
],
)
],
You can also replace the first Flexible with SizedBox and set an exact value, e.g:
Row(
children: [
SizedBox(
width: 100.0,
child: TextField(),
),
Flexible(
flex: 2,
child: RaisedButton(
child: Text('Hello'), onPressed: () {}),
)
],
)
],
TextField doesn't have an intrinsic size (width) constraint so it will always try to occupy all horizontal space. Flexible allows to constraint it to desired width in a Row.
Full example on DartPad.
I'm trying to get a header image to show on a page of an app but it's not showing up and the _header seems to be greyed out in my code. I'm missing something I guess that I'm unsure of. Edit: I need the header to show above the rows of content in the build.
Widget _header() {
return new Container(
child: new Row(
children:<Widget>[
new Column(
children: <Widget>[
Image.asset(
'assets/classes-Image.png',
),
],
),
],
),
);
}
Extra code below:
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: const Text('Learn How to Paint'),
backgroundColor: Color(0xFF202945),
),
body: new Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Column(
children: <Widget>[
Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(
left: 20.0,
),
),
Image.asset(
'assets/Profile-Photo.png',
),
new Padding(
padding: const EdgeInsets.only(
right: 20.0,
),
),
Text(
'Katherine G.',
),
],
),
],
),
```
You can achieve this by placing your header widget right before the Row widget.
The header is not showing because you didn't add it in the ListView.
I hope this solves your issue.
You need to be calling _header() from somewhere in your build function and give the result as a child to another widget. It being grayed out probably means you're not calling it.
in this below code i have Wrap widget into TabBarView and i'm not sure as this widget size, when i use Container with specify height my problem solved, but i miss some layouts which i want to show that with map, how can i resolve this problem? i tested SizedBox.expand but it doesn't any change
Flexible(
child: TabBarView(
children: [
Center(
child: Wrap(
children: feeds.map((feed){
return Container(
width: MediaQuery.of(context).size.width /3.5,
height:MediaQuery.of(context).size.width /3.5,
margin: EdgeInsets.all(2.0),
child: GridTile(
header: feed.feedType ==1?Icon(Icons.video_call)
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(3.0)
child: Image.asset(feed.feedImage))),
),
);
}).toList(),
),
),
],
controller: tabController,
),
),
I have a Scaffold with the following architecture, and the body is being covered by the bottom navigation. Everything works fine if I comment the navigation.
Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
appBar: AppAppBar(title: this.title),
body: Row(
children: [
Expanded(
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: this.pageProvider.horizontalPadding,
vertical: 25),
child: this.body,
),
),
)
],
),
bottomNavigationBar: AppNavigation(),
);
This is the implementation of the AppNavigation widget:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 64,
child: BottomNavigation(),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 80,
child: WorkoutButton(),
),
),
],
);
This is the body, regardless of what widget I use:
In case it is not clear enough, the body does not have almost height.
Why don’t you use a BottomNavigationBar widget instead of a Stack?
Anyway, that happens because your Stack is unconstrained, thus, using all the available space. Give it some constrains (E.g., by wrapping it in a ConstrainedBox with some height constraint).
ConstrainedBox(
constraints: BoxConstraints.tightFor(height: 150.0),
child: Stack( ...
)
)