CODEWITHSUNDEEP
flutter
sona ali
sona ali

Reputation: 63

Curved Container for the screen - flutter

I'm trying to create a curved container (semi circle) on whole screen using flutter image for the curved

I tried to use some solutions found on stackoverflow but it didn't work. can anyone help thanks

Upvotes: 1

Views: 365

Answers (1)

MORE AKASH
MORE AKASH

Reputation: 333

Wrap your widget with stack and then provide clip oval to the container and positioned your container to the left with half of your container width.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  const Demo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: [
            Positioned(
              top: -10,
              bottom: -10,
              left: -200,
              child: ClipOval(
                child: Container(
                  height: double.maxFinite,
                  width: 400,
                  color: Colors.black.withOpacity(0.5),
                ),
              ),
            ),
          ],
        ),
      
    );
  }
}

You will get the following output

enter image description here

Upvotes: 1

Related Questions