How to round corners of an entire app in Flutter?

user_9248277 0
Viewed 3494

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?

flutter-layout dart flutter android ios
1 Answers

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:

enter image description here

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

user_39239290
Related