Imed Boumalek
Imed Boumalek

Reputation: 166

How to overflow content from the top and clip it in flutter?

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:

What I have

Desired effect:

Desired effect

Upvotes: 2

Views: 1448

Answers (1)

Imed Boumalek
Imed Boumalek

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

Related Questions