flutterdartuser-interface

flutter: how to decrease the roundness of stadium border radius


I am making the user interface and I don't know how can I make the borders less rounded for the second widget. I tried to change the height but it still not helping.

What should I erase (it's the second one after the grey one).Should I change it to BoxDecoration And add radius.

I tried and makes the screen full of errors. Here is the code

import 'package:flutter/material.dart';
import 'package:flashy_tab_bar2/flashy_tab_bar2.dart';
import 'workout_post_detail.dart';
import 'editprofile_business.dart';
import 'seeall_workout.dart';

class ClientPage extends StatefulWidget {
  @override
  _ClientPageState createState() => _ClientPageState();
}

class _ClientPageState extends State<ClientPage> {
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Your profile',
              style:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
          backgroundColor: Colors.black,
        ),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: Stack(alignment: Alignment.bottomCenter, children: [
              Column(children: [
                SizedBox(
                  height: 10,
                ),
                Center(
                    child: CircleAvatar(
                        radius: 60,
                        backgroundColor: Colors.white,
                        child: CircleAvatar(
                            radius: 46,
                            backgroundColor: Colors.grey.shade100,
                            child: Text('Pic')))),
                SizedBox(
                  height: 10,
                ),
                Text(
                  'Usermane',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 60,
                  width: MediaQuery.of(context).size.width * 0.90,
                  decoration: ShapeDecoration(
                      shape: const StadiumBorder(),
                      color: Colors.grey[200],
                      shadows: [
                        BoxShadow(
                          color: Colors.grey.shade400,
                          blurRadius: 10,
                          spreadRadius: 2,
                        ),
                      ]),
                  child: Padding(
                    padding: const EdgeInsets.only(left: 25.0, right: 25),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Subscribers',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text(
                          '8',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, color: Colors.grey),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 190,
                  width: MediaQuery.of(context).size.width * 0.90,
                  decoration: ShapeDecoration(
                      shape: const StadiumBorder(),
                      color: Color.fromARGB(255, 255, 255, 255),
                      shadows: [
                        BoxShadow(
                          color: Colors.grey.shade400,
                          blurRadius: 10,
                          spreadRadius: 2,
                        ),
                      ]),
                ),
              ])
            ])));
  }
}

this is the outcome of the code

Borders too rounded


Solution

  • StadiumBorder is inspired by the shape of a stadium

    You can think of it as (A box with 2 semicircles on opposite sides).

    enter image description here

    So, an image holds thousand words, there's a correlation between box's dimensions and the area of that semicircle, we are talking about that circle because it's in fact the thing that defines the roundness of the box's borders.

    Back to the problem , you can not manually decrease or increase the roundness of the borders of the stadium border container, all you can do is changing container size which will affect the area of each circle on both sides, and weakly will be reflected on the roundness of the borders (it's math here).

    If you need to explicitly define that roundness of the borders, you should use BoxDecoration rather than ShapeDecoration:

       Container(
                  height: 100,
                  width: MediaQuery.of(context).size.width * 0.90,
                  decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(10),
                )