現場で使える Flutter開発入門の3-3までの不明点を調べた

<br />

現場で使える Flutter開発入門の3-3までの不明点を調べた
調べたことを備忘録で記載する

・MediaQuery
画面サイズを取得するために使う
https://zenn.dev/chooyan/articles/3c2691e93f4038

・BoxDecoration
角丸等のボーダーを引く
https://www.egao-inc.co.jp/programming/flutter_borderline_radius/

・AnimatedContainer
アニメーションさせる
https://flutter.ctrnost.com/basic/animation/animatedcontainer/

・cached_network_image
何もしないとエラーなのでpub getしましょう
https://pub.dev/packages/cached_network_image/install

・MaterialPageRoute
サンプルコードでは、pushメソッドの引数としてMaterialPageRouteを指定しています。これは、遷移時にMaterialDesignに則ったアニメーションを行うための指定です。
https://qiita.com/heavenosk/items/9e43298955a371221393

・Hero
画面遷移のアニメショーン
https://qiita.com/PictoMki/items/f02e7f38d69ece01dad8

・No MediaQuery widget found.
ScaffoldやMaterialAppで一番外側をラップする必要がある
https://stackoverflow.com/questions/48498709/widget-test-fails-with-no-mediaquery-widget-found/48500804

・画面サイズを超えた場合のエラー
SizedBoxをSpacerに変えれば直る

The following assertion was thrown during layout:
A RenderFlex overflowed by 105 pixels on the bottom.

The relevant error-causing widget was:
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

・Navigator operation requested with a context that does not include a Navigator.
飛び元はMaterialAppの中に入れるコンテンツだけにして
飛び先もコンテンツだけにすると動く
ただし、飛び元がMaterialApp + コンテンツで
飛び先がコンテンツだと今回のエラーが出る
https://qiita.com/hanach/items/5a1a1133727eb99a10aa

<br />

Pocket

関連記事: