Showing images and using buttons

Let's now add an Image widget under the two texts, as follows:

Image.network(
'https://images.freeimages.com/images/large-previews/eaa/the-beach-1464354.jpg',
height: 350,
),

Image is a widget that has a network() constructor, which automatically downloads an image from a URL with a single line of code. The image is taken from FREEIMAGES (https://www.freeimages.com/), which contains a stock of free photos for personal and commercial use.

The height property of an image specifies its height, depending on the pixel density of the screen. By default, the width will be resized proportionally.

In Flutter, when we speak of pixels, we are actually speaking of logical pixels, and not physical pixels.
Physical pixels are the actual number of pixels that a device has. But, there are several form factors, and the resolution of a screen may vary substantially.
For example, the Sony Xperia E4 has a screen size of 5'', and a resolution of 960 * 540 pixels. The Xperia X has the same screen size of 5'', but a resolution of 1920 * 1080. So, if you wanted to draw a square of 540 pixels per side, it would be much smaller on the second device. That's why there's the need for logical pixels. Each device has a multiplier, so that when you use logical pixels, you don't have to worry too much about the resolution of a screen. 

Let's also put a button under the image: 

RaisedButton(
child: Text('Contact Us'),
onPressed: () => true,),

RaisedButton shows a button that a user can press (or click). Inside Raisedbutton, we have placed Text as the widget child, and in the onPressed property, we have created an anonymous () function with an arrow operator, and in the function, we are just returning true. This is only temporary. When the user presses the button, we want to show a message, and we'll do that later. 

Next, you can see the code of the MyApp class so far, and the result on an Android emulator:

We have almost reached the end result that we wanted to achieve, but there are a couple of things that we need to fix. We should add some space between the widgets, and show a message when the user selects the Contact Us button. Let's begin with the message. 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.72.74