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
You can think of it as (A box with 2 semicircles on opposite sides).
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),
)