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