Reputation: 166
I Have positioned the UI elements but have no idea how to achieve that corner clip effect. Any help is appreciated, Thank you.
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Align(
alignment: Alignment.topRight,
child: Image.asset('assets/images/Lines.png'),
),
Spacer(),
Center(
child: Image.asset('assets/images/Logo.png'),
),
Spacer(),
Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/images/Lines.png'),
),
],
),
);
}
}
What I have:
Desired effect:
Upvotes: 2
Views: 1448
Reputation: 166
I put the widgets in a stack
and offset them.
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Align(
alignment: Alignment.topRight,
child: Container(
height: 150,
width: 150,
child: Stack(
clipBehavior: Clip.hardEdge,
children: [
Positioned(
right: -35,
top: -35,
child: Image.asset('assets/images/Lines.png'),
),
],
),
),
),
Spacer(),
Center(
child: Image.asset('assets/images/Logo.png'),
),
Spacer(),
Align(
alignment: Alignment.bottomLeft,
child: Container(
height: 150,
width: 150,
child: Stack(
clipBehavior: Clip.hardEdge,
children: [
Positioned(
left: -35,
bottom: -35,
child: Image.asset('assets/images/Lines.png'),
),
],
),
),
)
],
),
);
}
}
Upvotes: 1