Flutter set background image

Time:2021-2-5

Effect display

Flutter set background image

preface

In our usual development, we often use the background image. What I will introduce below is that container is set by boxdecoration

layout

1. Create routing subpage

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        Title: text ("preferred visitor subscription function"),
      ),
      body: buildBody()
    );
  }

Scaffold

The skeleton of the routing page, in which we can assemble a complete routing page

appBar

Create navigation bar

body

Building the main structure of the page

2. Page layout

Widget buildBody() {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        buildHeader(),
        // Row(children: <Widget>[
        //   Text(
        //'batch management function',
        //     style:TextStyle(
        //       fontSize: 16.0,
        //       color: Color.fromRGBO(234,200,134,1)
        //     )
        //   )
        // ],)
      ],
    );
  }

In order to facilitate subsequent maintenance, it is best to split the page layout into different small modules to write separately, otherwise it is too difficult to maintain later

Column

That is, the arrangement of sub components in a horizontal or vertical direction. FlutterRowandColumnTo achieve linear layout;

First of all, the idea of layout is to useColumnYou can arrange its subcomponents vertically.

mainAxisAlignment

Then align all the sub elements in the direction of the main axis

3. Background settings

Widget buildHeader() {
    return new Container(
      height: 160.0,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/header.png"),
          fit: BoxFit.cover
        )
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // alignment: WrapAlignment.center,
        // crossAxisAlignment: WrapCrossAlignment.center,
        // runSpacing: 9.0,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'batch management function',
                style:TextStyle(
                  fontSize: 16.0,
                  color: Color.fromRGBO(234,200,134,1)
                )
              )
            ],
          ),
          Wrap(
            runSpacing: 9.0,
            alignment: WrapAlignment.center,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '${pageData['title']}',
                    style:TextStyle(
                      fontSize: 38.0,
                      color: Color.fromRGBO(234,200,134,1)
                    )
                  )
                ],
              ),
              //Custom fillet
              ClipRRect(
                borderRadius: BorderRadius.circular(12.5),
                child: Container(
                  height: 25.0,
                  width: 190.0,
                  color: Color.fromRGBO(234,200,134,1),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '${pageData['subTitle']}', 
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Color.fromRGBO(113,80,24,1)),
                      )
                    ]
                  )
                )
              )
            ],
          )
        ],
      ),
    );
  }

The first is to put the banner part of the head into a methodContainerContainer components to wrap

Container

Container components

MediaQuery.of (context). Size gets the size of the screen

Set container size:

Height: 160.0, // highly customized
width:  MediaQuery.of (context). size.width , // the width setting is the same as the screen width
decoration
decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("images/header.png"),
      fit: BoxFit.cover
    )
  ),

ContainerAn attribute of a component used to decorate the background;

We usually use it directlyBoxDecorationClass, which is a subclass of decoration, implements the drawing of common decorative elements.

BoxDecoration({
  Color, // color
  Decorationimage, // image
  Boxborder, // border
  Borderradiusgeometry borderradius, // fillet
  List < boxshadow > boxshadow, // shadow, multiple shadows can be specified
  Gradient gradient, // gradient
  Blendmode backgroundblendmode, // background blending mode
  BoxShape shape =  BoxShape.rectangle , // shape
})

Use the decorationimage method to load images

image: DecorationImage(
  image: AssetImage("images/ header.png "), // load local images
  fit:  BoxFit.cover  //Image scaling
)
Image image configuration

staypubspec.yamlInflutterAdd the following to the section:

assets:
    - images/header.png

Wrap streaming layout

Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0,
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
})
  • spacing: the distance between the main axis direction sub widgets
  • runSpacing: spacing along the longitudinal axis
  • runAlignment: alignment of vertical axis

ClipRRect

Clipping subcomponents to rounded rectangles

 ClipRRect({ 
     ...
     BorderRadius borderRadius, 
     CustomClipper<RRect> clipper, 
     Clip clipBehavior = Clip.antiAlias, 
     Widget child
     ...
 })

Full demo

import 'package:flutter/material.dart';

const pageData = {
    "discountStatus": 2, 
    "subscribeStatus": "0", 
    "Title": "limited time and free", 
    "Subtitle": "activity time from September 1 to September 30,", 
    "packageList": [
        {
            "id": 23, 
            "Desc": "monthly subscription,", 
            "dealPrice": 10, 
            "originPrice": 50, 
            "recommand": 1
        }, 
        {
            "id": 33, 
            "Desc": "half year subscription,", 
            "dealPrice": 56, 
            "originPrice": 280, 
            "recommand": 0
        }, 
        {
            "id": 56, 
            "Desc": "annual subscription,", 
            "dealPrice": 108, 
            "originPrice": 540, 
            "recommand": 0
        }
    ]
};
class BatchSub extends StatefulWidget {
  @override
  createState() => new BatchSubState();
  
}

class BatchSubState extends State<BatchSub> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        Title: text ("preferred visitor subscription function"),
      ),
      body: buildBody()
    );
  }
  Widget buildBody() {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        buildHeader(),
        // Row(children: <Widget>[
        //   Text(
        //'batch management function',
        //     style:TextStyle(
        //       fontSize: 16.0,
        //       color: Color.fromRGBO(234,200,134,1)
        //     )
        //   )
        // ],)
      ],
    );
  }
  Widget buildHeader() {
    return new Container(
      height: 160.0,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/header.png"),
          fit: BoxFit.cover
        )
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // alignment: WrapAlignment.center,
        // crossAxisAlignment: WrapCrossAlignment.center,
        // runSpacing: 9.0,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'batch management function',
                style:TextStyle(
                  fontSize: 16.0,
                  color: Color.fromRGBO(234,200,134,1)
                )
              )
            ],
          ),
          Wrap(
            runSpacing: 9.0,
            alignment: WrapAlignment.center,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '${pageData['title']}',
                    style:TextStyle(
                      fontSize: 38.0,
                      color: Color.fromRGBO(234,200,134,1)
                    )
                  )
                ],
              ),
              //Custom fillet
              ClipRRect(
                borderRadius: BorderRadius.circular(12.5),
                child: Container(
                  height: 25.0,
                  width: 190.0,
                  color: Color.fromRGBO(234,200,134,1),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '${pageData['subTitle']}', 
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Color.fromRGBO(113,80,24,1)),
                      )
                    ]
                  )
                )
              )
            ],
          )
        ],
      ),
    );
  }
}

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]