Repository navigation
size problem with SizedBox and Container not child in Scaffold #18399
Description
in main dart return Scaffold Widget
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
SizedBox sziebox = new SizedBox(
width: 100.0,
height: 100.0,
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red),
),
);
return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: new Text(widget.title),
),
body: sziebox,
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}the red color size is 100*100,this is right .
the problem code:
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
SizedBox sziebox = new SizedBox(
width: 100.0,
height: 100.0,
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red),
),
);
return sziebox;
}the red color size fill the whole screen.why size is not 100 * 100??
this is right image
this is problem image
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v0.5.3-pre.21, on Microsoft Windows [Version 10.0.17134.48], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[√] Android Studio (version 3.1)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] IntelliJ IDEA Ultimate Edition (version 2018.1)
[√] Connected devices (1 available)
• No issues found!
Activity
[-]size problem whth SizedBox and Container ont in Scaffold[/-][+]size problem whth SizedBox and Container not in Scaffold[/+][-]size problem whth SizedBox and Container not in Scaffold[/-][+]size problem with SizedBox and Container not child in Scaffold[/+]zoechi commentedon Jun 12, 2018
@Hixie
HansMuller commentedon Jun 12, 2018
The MaterialApp's home widget is constrained to a fixed size that matches the size of the screen.
A parent widget's constraints trump its child's constraints, which is why the red container in the second version of your example matches the size of the screen.
You can get the result you want by adding an additional container, like Align:
wanghuangang commentedon Jun 13, 2018
@HansMuller thank you, this is the key point A parent widget's constraints trump its child's constraints,
josvos commentedon Sep 24, 2018
@HansMuller can you point me to the explanation of the theory "a parent widget's constraints trump its child's constraints" for the case a parent is larger than its child? I had this same problem (and solved it now with the Scaffold), but to me it sounds very illogical that (e.g.) the size of a SizedBox is ignored, while its parent is much larger (i.e. the whole screen).
footurist commentedon Nov 3, 2018
@HansMuller
Would it be useful to add a description of this behavior to the following part of
Container'sdocumentation ? From the current description, it seems unclear to me which constraints win.github-actions commentedon Sep 1, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.