How to round corners of an entire app in Flutter?

Question

I want my app to simulate the rounded display corners most modern day smartphones have by rounding the corners of the app and making the background black. Currently, the TikTok app has something like this.

I already tried using the borderRadius property of the Material widget and wrapping the contents into a container with rounded corners. Neither one worked for me.

Any ideas how this could be done?

Solution

I would use ClipRRect at the up most level:

Here is a full example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: ClipRRect(
        borderRadius: BorderRadius.circular(20.0),
        child: MyHomePage(title: 'Flutter Demo Home Page')),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Something")),
        body: Container(alignment: Alignment.center, color: Colors.blue, child: Text("hello")));
  }
}

And here is the result:

Maybe you will want to reduce the radius from 20 to something like 8 to have the result similar to the image you provided.

Comments

[Sanjayrajsinh]

when you run your app in rounded corner device it automatically set rounded corvner

[Lucas Aschenbach]

Yes, however, I mean to simulate this for devices where the display corners aren't rounded off.