In this example, we are going to show you how to change the default primary theme color of Flutter widget components to any other custom theme color at once by using ThemeData. The default color of the Flutter app is blue color.
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple
),
)
You need to pass a ThemeData to the theme parameter of MaterialApp in your Flutter App. You have to pass your own color of choice. You can also set the custom color as the default primary color of your App.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple
),
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Color Theme"),
),
body: Container(
padding: EdgeInsets.all(20),
alignment: Alignment.center,
child: Column(
children:[
ElevatedButton(
onPressed: (){
},
child: Text("Elevated Button"),
),
ListTile(
leading: Checkbox(
value: true,
onChanged: (value){},
),
title:Text("This is checkbox")
),
ListTile(
leading: Radio(
groupValue: true,
value: true,
onChanged: (value){},
),
title:Text("This is Radio")
)
]
),
)
);
}
}
Here, we have set the purple color as the default primary color of the Flutter App using ThemeData. The output of the above code will look like below:
In this way, you can change the default primary theme color fo your Flutter app.
Please Wait...
No any Comments on this Article