Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the skills in Flutter development". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Part overflow

The exception is roughly as follows:

A RenderFlex overflowed by 22 pixels on the bottom.

The reason is that the content in the horizontal or vertical direction exceeds the size of the parent assembly. Generally speaking, there is no such problem on our page, because according to the design of the page, whether it exceeds or not can be expected in advance. Note, however, that there are pages that pop up in the input method. For example, my following example:

You can see 22 pixels overflowing from the bottom, which may not be a problem above 18:9 because the screen is high enough. But this 16:9 phone may be exposed. There are two solutions:

Wrap a layer of SingleChildScrollView so that your page can be slid up.

Set resizeToAvoidBottomInset to false in Scaffold. The default is ture, which prevents the part from being obscured. If you use this method, if there is an input box at the bottom, it will cause occlusion.

You can choose according to your actual needs.

two。 Occlusion of the input box

The page is as follows:

There is an input box at the bottom, and the submit button is fixed at the bottom. At first, I thought that since it was fixed at the bottom, I would use Stack with Positioned to achieve it, but it would lead to occlusion when the input method pops up.

In the image above, I selected an input box, but because the input method pops up at the bottom of the input box by default, it is obscured by the "submit" button.

In the end, my solution is to use Column with Expanded to achieve. After repair, it is as follows:

3.SafeArea

Once there is a part fixed at the top or bottom (or, more carefully, on the four sides of the screen). Well, let's use SafeArea to package it. Because both Android and IOS have status bars, and even IOS has a bar called "HomeIndicator". So if you are not careful, there will be adaptation problems.

BottomNavigationBar and AppBar, which we often use in Flutter, actually deal with this kind of problem internally. Take the AppBar source code as an example:

Class _ AppBarState extends State {@ override Widget build (BuildContext context) {if (widget.primary) {appBar = SafeArea (/ /

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.