用Flutter遮罩图像

Question

如何用Flutter创建类似的东西？我想用图像填充灰色容器。

Answer 1

return SafeArea(
  child: Scaffold(
    key: _scaffoldKey,
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Stack(
            overflow: Overflow.clip,
            children: <Widget>[
              ClipPath(
                clipper: CustomShapeClipper(),
                child: Container(
                  height: MediaQuery.of(context).size.height / 2.6,
                  width: double.infinity,
                  color: Colors.blue.shade300,
                  child: Center(
                    child: Offstage(),
                  ),
                ),
              ),
              ClipPath(
                clipper: CustomShapeClipper2(),
                child: Container(
                  height: MediaQuery.of(context).size.height / 2.6 - 10,
                  width: double.infinity,
                  color: Colors.blue,
                  child: Center(child: Offstage()),
                ),
              ),
              Positioned(
                left: -90,
                top: -90,
                child: Container(
                    height: MediaQuery.of(context).size.height / 3,
                    width: MediaQuery.of(context).size.width / 1.7,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color:   Colors.blue.shade300,
                        shape: BoxShape.circle),
                    child: Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          color: Colors.blue, shape: BoxShape.circle),
                      child: Offstage(),
                    )),
              ),
              Positioned(
                right: -120,
                top: -100,
                child: Container(
                    height: MediaQuery.of(context).size.height / 2.5,
                    width: MediaQuery.of(context).size.width / 1.2,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                       color:  Colors.blue.shade300,
                        shape: BoxShape.circle),
                    child: Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          color: Colors.blue, shape: BoxShape.circle),
                      child: Offstage(),
                    )),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 15.0),
                child: Center(
                    child: Image.asset(
                  'assets/images/loginimage.png',
                  width: MediaQuery.of(context).size.width / 1,
                  height: MediaQuery.of(context).size.height / 5,
                  colorBlendMode: BlendMode.colorBurn,
                )),
              )
            ],
          ),
          Form(
            key: _formKey,
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 15.0),
                  child: Container(
                    width: MediaQuery.of(context).size.width / 1.2,
                    child: TextFormField(
                      validator: (String value) {
                        if (value.isEmpty) {
                          return "Please enter phone number";
                        } else if (value.length != 10) {
                          return "Please enter valid Phone number";
                        } else {
                          return null;
                        }
                      },
                      controller: mobile,
                      keyboardType: TextInputType.phone,
                      inputFormatters: [
                        WhitelistingTextInputFormatter.digitsOnly,
                        LengthLimitingTextInputFormatter(10),
                      ],
                      textInputAction: TextInputAction.done,
                      decoration: InputDecoration(
                          labelText: 'Mobile No.',
                          contentPadding:
                              EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
                          hintText: 'Mobile No.',
                          hintStyle: TextStyle(color: Colors.grey),
                          prefixIcon: Icon(
                            Icons.phone,
                            color: Colors.grey,
                          ),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(25.0))),
                    ),
                  ),
                ),

                // Padding(
                //   padding: const EdgeInsets.only(top: 15.0),
                //   child: Container(
                //     width: MediaQuery.of(context).size.width / 1.2,
                //     child: TextFormField(
                //       validator: (String value) {
                //         if (value.isEmpty) {
                //           return "Please enter password";
                //         } else if (value.length < 6) {
                //           return "Password must have 6 character";
                //         } else {
                //           return null;
                //         }
                //       },
                //       controller: userPassword,
                //       obscureText: true,
                //       textInputAction: TextInputAction.done,
                //       focusNode: fpassword,
                //       decoration: InputDecoration(
                //           labelText: 'Password',
                //           hintText: 'Enter your password',
                //           contentPadding:
                //               EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
                //           hintStyle: TextStyle(color: Colors.grey),
                //           prefixIcon: Icon(
                //             Icons.security,
                //             color: Colors.grey,
                //           ),
                //           border: OutlineInputBorder(
                //               borderRadius: BorderRadius.circular(25.0))),
                //     ),
                //   ),
                // ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
                top: 50,
                bottom: 10,
                left: MediaQuery.of(context).size.width / 10.0,
                right: MediaQuery.of(context).size.width / 10.0),
            child: ButtonTheme(
              minWidth: MediaQuery.of(context).size.width / 1.2,
              height: MediaQuery.of(context).size.height / 12,
              child: RaisedButton(
                  onPressed: () {
                    if (_formKey.currentState.validate() == true) {
                      _checkinternet().then((onValue) {
                        if (onValue == true) {
                          setState(() {
                            buttonAction = true;
                            buttonText = spintool;
                          });
                          verifyPhone();
                          // signInWithEmail();
                        }
                      });
                    }
                  },
                  color: Colors.blue,
                  child: buttonText,
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0))),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              top: 5,
            ),
            child: ButtonTheme(
              minWidth: MediaQuery.of(context).size.width / 1.2,
              height: MediaQuery.of(context).size.height / 12,
              child: FlatButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => ChatSignUpPage()));
                  },
                  child: Text(
                    'SignUp',
                    style: TextStyle(
                      color: Colors.blue,
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0))),
            ),
          )
        ],
      ),
    ),
  ),
);

只需添加剪辑类

Chatbox app