Mask image with Flutter - flutter

Question

How can I create something like this with Flutter? I want to fill the grey container with an image.

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))),
),
)
],
),
),
),
);
just add clip class
Chatbox app