Image component image
Define a container and load pictures in the child of the container
Image.asset("src"): local image
Image.network("src"): remote image
Common properties:
fit: Control the stretching and squeezing of the image according to the parent container. Boxfit.cover: The image fills the entire container without deformation, and the display may be stretched, cropped, and full
repeat: Tile. ImageRepeat.repeat: Both the x-axis and the y-axis are tiled. repeatX: X-axis tiling. repeatY: y-axis tiling
(1) Use network to load remote images:
Circular picture implementation method: (generally use the second, ClipOval component to achieve)
Use scene: avatar, etc.
①Container component implementation: set the width and height, use the borderRadius property of decoration, and the value is half of the width and height
②ClipOval component implementation: use it directly, set the width and height of the picture to be equal, and set the filling method to achieve
(2) Use asset to load local images:
Create an images folder under the root folder, uncomment the assets in the pubspec.yaml file, and note that spaces cannot be deleted
icon component
①flutter has its own icon component Icon, which can be called directly. SizedBox is a block-level component, which is equivalent to margin
② Customize font icons with the help of Alibaba icon library
- Baidu search Alibaba icon library, enter the official website, log in, add the icon you want to the shopping cart, click the download code button
- Create a font folder in the root directory of the project, and move the .json and .ttf files in the downloaded code decompression file to the font folder
- Uncomment fonts in the pubspec.yaml file, be careful not to delete spaces
- Create a new custom font icon file .dart file under the lib folder
- Import the custom font icon file in the main.dart file and use the custom font icon
