import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ThemeData Demo',
theme: ThemeData(
primaryColor: Colors.blue,
colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.orange),
fontFamily: 'Roboto',
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Themed Home Screen'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Welcome to the app!',
style: theme.textTheme.headline6,
),
const SizedBox(height: 20),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: theme.colorScheme.secondary,
),
onPressed: () {},
child: const Text('Click Me'),
),
],
),
),
);
}
}
We added a ThemeData to the MaterialApp to set the primary color to blue and the secondary (accent) color to orange using colorScheme. We also set the default font family to 'Roboto'.
In the HomeScreen, the AppBar automatically uses the primary color from the theme. The welcome text uses the theme's headline6 text style for consistent styling. The button uses ElevatedButton.styleFrom to apply the accent color from the theme's color scheme.
This setup ensures consistent colors and fonts across the app, making it easy to maintain and update the look.
