I have improved the code and fixed the bugs in your code. Here is the refined solution.
import 'package:flutter/material.dart';
void main() { WidgetsFlutterBinding.ensureInitialized(); runApp(const MyApp()); }
class MyApp extends StatelessWidget { const MyApp({super.key});
@override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: TabScreen(), ); } }
class TabScreen extends StatefulWidget { const TabScreen({super.key});
@override State<TabScreen> createState() => _TabScreenState(); }
class _TabScreenState extends State<TabScreen> with SingleTickerProviderStateMixin { late TabController _tabController; int _selectedIndex = 0;
@override void initState() { _tabController = TabController(length: 2, vsync: this); _tabController.addListener(() { _selectedIndex = _tabController.index; setState(() {}); });
super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Tab Bar Example'), bottom: TabBar( controller: _tabController, isScrollable: false, dividerColor: Colors.transparent, indicator: const UnderlineTabIndicator( borderSide: BorderSide(color: Colors.green, width: 4.0), borderRadius: BorderRadius.all(Radius.circular(25)), insets: EdgeInsets.symmetric(horizontal: 70.0, vertical: 17), ), indicatorSize: TabBarIndicatorSize.tab, labelColor: Colors.black, unselectedLabelColor: Colors.grey, tabs: [ Tab( child: _buildTab(text: 'Phone', isSelected: _selectedIndex == 0)), Tab( child: _buildTab(text: 'Email', isSelected: _selectedIndex == 1)), ], ), ), body: TabBarView( controller: _tabController, children: const [ Text('Phone'), Text( 'Email', ) ], ), ); }
Widget _buildTab({required String text, required bool isSelected}) { return Container( alignment: Alignment.center, width: double.infinity, decoration: const BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(25), topRight: Radius.circular(25), ), ), child: Text( text, style: TextStyle( fontSize: 18, color: isSelected ? Colors.black : Colors.grey, ), ), ); } }

To use any shape in your *button*, make sure you perform all the code inside the *Button* widget:
**shape: RoundedRectangleBorder( borderRadius: new BorderRadius.circular(18.0), side: BorderSide(color: Colors.red) ),**
If you want make it is *square*, use `BorderRadius.circular(0.0)` It automatically makes it into a *square*.
The button is like this:
[![Enter image description here][1]][1]
Here is the all source code for the give UI screen:
Scaffold( backgroundColor: Color(0xFF8E44AD), body: new Center( child: Column( children: <Widget>[ Container( margin: EdgeInsets.fromLTRB(90, 10, 20, 0), padding: new EdgeInsets.only(top: 92.0), child: Text( "Currency Converter", style: TextStyle( fontSize: 48, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), Container( margin: EdgeInsets.only(), padding: EdgeInsets.all(25), child: TextFormField( decoration: new InputDecoration( filled: true, fillColor: Colors.white, labelText: "Amount", border: OutlineInputBorder( borderRadius: BorderRadius.circular(10), ), ), ), ), Container( padding: EdgeInsets.all(25), child: TextFormField( decoration: new InputDecoration( filled: true, fillColor: Colors.white, labelText: "From", border: OutlineInputBorder( borderRadius: BorderRadius.circular(10), ), ), ), ), Container( padding: EdgeInsets.all(25), child: TextFormField( decoration: new InputDecoration( filled: true, fillColor: Colors.white, labelText: "To", border: OutlineInputBorder( borderRadius: BorderRadius.circular(10), )), ), ), SizedBox(height: 20.0), MaterialButton( height: 58, minWidth: 340, shape: RoundedRectangleBorder( borderRadius: new BorderRadius.circular(12)), onPressed: () {}, child: Text( "CONVERT", style: TextStyle( fontSize: 24, color: Colors.black, ), ), color: Color(0xFFF7CA18), ), ], ), ), ), );
[1]: https://i.sstatic.net/spGWP.png