Question 385634 in Flutter Question posted in
The official Flutter documentation can be found here.

I want my flutter container to have similar kind of squirecircle ui like on css

enter image description here

i am trying to create similar squircle box on flutter like css but no option to change top-center, botom-center, left-center and right-center border. is there any workaround to do so.

no option to achieve similar results.

import 'package:flutter/material.dart';

class frostedGlassBox extends StatelessWidget {
  const frostedGlassBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(22), color: Colors.amber),
    );
  }
}
Tags:

2

Answers


  1. 0

    If you care about the shadows on the borders you could use a card like this:

     SizedBox(
                width: 100,
                height: 100,
                child: Card(
                  elevation: 10,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22),
                  ),
                  color: Colors.amber,
                  child: Align(alignment: Alignment.center, child: Text("Square", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),)),
                ),
              ),
    Login or Signup to reply.
  2. 0

    If you want to align the entire Container within its parent widget, you can wrap the Container with an Align widget and specify the alignment within the Align widget. Here’s how you can do it:

    Widget build(BuildContext context) {
     return Align(
       alignment: Alignment.center, // Aligns the Container in the center,
       child: Container(
         decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(22),
         color: Colors.amber,
     ),
    ),
  ),
 }
}

    In this updated code, the entire Container is wrapped with an Align widget, and the alignment property within the Align widget is set to Alignment.center, which will align the Container at the center of its parent widget. You can change the alignment value as needed (e.g., Alignment.topLeft, Alignment.bottomRight, etc.).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search