How can I lay out the following screen in flutter

Question

I am new to Flutter and trying to convert my iOS app to Flutter. However, I am having difficulty laying out the screen. Below is what the iOS screen looks like. I keep on getting red screens with layout errors saying it cannot layout the screen. When I add a column and add to that an image and a horizontally scrolling grid in Flutter I get the layout errors. How can I layout this screen?

I think it should have a column as the main widget. Then, a large image should be displayed, which displays centered width-wise on the screen. It should be constrained height-wise and wide enough not to distort the image. The photos come in a variety of heights and widths.

Then there should be a large text field centered width-wise in the central column. Then a breed text box is centered width-wise in the central column and followed by a line of stats—lastly, a city, state, and miles.

Then a centered list of icons with a single line of text-centered underneath each icon. Finally, the whole icon bar should be centered width-wise in the column.

Next, there should be a line of small photos of the cat, which is left aligned to the column and fills to the right going off-screen and scrollable horizontally. It should be a grid with a staggered layout width-wise. Each image should be a fixed height and a ratio of width to fixed height to fit the image without distorting it. The images should have rounded corners. The width and height of the source image are known ahead of time and need to be adjusted to fit the new fixed height.

Lastly, there should be a web browser that fills the width of the column with a height large enough to hold the content of the HTML without scrolling the web browser so the whole screen looks like it is one screen.

The whole screen should be able to scroll vertically but not horizontally to see the main column's total content.

Below is what the screen should look like: