Flutter自定义主题或UI风格插件adwaita的使用
Flutter自定义主题或UI风格插件adwaita的使用
Adwaita Theme 是一个实现了 Adwaita 颜色方案的 Flutter 插件，灵感来自于 libadwaita 和 yaru theme。该插件允许你在 Flutter 应用中轻松集成 Adwaita 主题风格。
使用方法
首先，在你的 pubspec.yaml 文件中添加 adwaita 依赖：
dependencies:
flutter:
sdk: flutter
adwaita: ^0.1.0 # 确保使用最新版本
然后在你的 Dart 文件中导入并使用该插件：
import 'package:flutter/material.dart';
import 'package:adwaita/adwaita.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.light);
MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeMode>(
valueListenable: themeNotifier,
builder: (_, ThemeMode currentMode, __) {
return MaterialApp(
theme: AdwaitaThemeData.light(),
darkTheme: AdwaitaThemeData.dark(),
debugShowCheckedModeBanner: false,
home: MyHomePage(themeNotifier: themeNotifier),
themeMode: currentMode);
});
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({required this.themeNotifier, Key? key}) : super(key: key);
final ValueNotifier<ThemeMode> themeNotifier;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Dark mode'),
actions: [
SizedBox(
height: 30,
child: CupertinoSwitch(
activeColor: AdwaitaColors.blue3,
trackColor: AdwaitaColors.warmGrey,
value: widget.themeNotifier.value != ThemeMode.light,
onChanged: (value) {
widget.themeNotifier.value =
widget.themeNotifier.value == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light;
},
),
),
],
),
body: Column(
children: <Widget>[
Column(
children: [
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('BUY TICKETS'),
onPressed: () {/* ... */},
),
const SizedBox(width: 8),
TextButton(
child: const Text('LISTEN'),
onPressed: () {/* ... */},
),
const SizedBox(width: 8),
],
),
],
),
),
],
),
Expanded(
child: Center(
child: SizedBox(
width: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title 1',
style: Theme.of(context).textTheme.displayLarge,
),
Text(
'Heading',
style: Theme.of(context).textTheme.headlineSmall,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title 2',
style: Theme.of(context).textTheme.displayMedium,
),
Text(
'Body',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title 3',
style: Theme.of(context).textTheme.displaySmall,
),
Text(
'Caption Heading',
style: Theme.of(context).textTheme.titleLarge,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Title 4',
style: Theme.of(context).textTheme.headlineMedium,
),
Text(
'Caption',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
]
.map(
(e) => Padding(
padding: const EdgeInsets.all(12),
child: e,
),
)
.toList(),
),
),
),
),
],
),
);
}
}
示例展示
以下是应用运行时的两种主题模式截图：
-
Light Theme
-
Dark Theme
通过上述代码和示例，你可以轻松地在 Flutter 应用中实现 Adwaita 主题风格，并根据用户需求切换不同的主题模式。
更多关于Flutter自定义主题或UI风格插件adwaita的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义主题或UI风格插件adwaita的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中，自定义主题或UI风格插件adwaita的使用可以极大地丰富应用的外观和用户体验。adwaita是一个受GNOME Adwaita主题启发的Flutter主题插件，通常用于创建干净、现代的UI界面。以下是如何在Flutter项目中集成和使用adwaita插件的代码示例。
1. 添加依赖
首先，你需要在pubspec.yaml文件中添加adwaita插件的依赖。
dependencies:
flutter:
sdk: flutter
adwaita: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get来安装依赖。
2. 导入Adwaita主题
在你的Dart文件中，导入adwaita包。
import 'package:adwaita/adwaita.dart';
3. 应用Adwaita主题
你可以在MaterialApp的theme属性中应用AdwaitaThemeData来设置全局主题。
import 'package:flutter/material.dart';
import 'package:adwaita/adwaita.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Adwaita Theme Demo',
theme: AdwaitaThemeData(), // 应用Adwaita主题
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Adwaita Theme Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, Adwaita!',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Press Me'),
),
],
),
),
);
}
}
4. 自定义Adwaita主题
如果你想要自定义Adwaita主题，可以通过覆盖AdwaitaThemeData中的属性来实现。例如，你可以更改主颜色、文本主题等。
theme: AdwaitaThemeData(
primaryColor: Colors.blue, // 自定义主颜色
textTheme: AdwaitaTextTheme().copyWith(
headline1: TextStyle(color: Colors.red), // 自定义文本主题
),
),
5. 完整示例
以下是一个完整的示例，展示了如何集成和自定义adwaita主题。
import 'package:flutter/material.dart';
import 'package:adwaita/adwaita.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Adwaita Theme Demo',
theme: AdwaitaThemeData(
primaryColor: Colors.blue, // 自定义主颜色
textTheme: AdwaitaTextTheme().copyWith(
headline1: TextStyle(color: Colors.red), // 自定义文本主题
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Adwaita Theme Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, Adwaita!',
style: Theme.of(context).textTheme.headline1, // 使用自定义文本主题
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Press Me'),
style: ElevatedButton.styleFrom(
primary: Theme.of(context).primaryColor, // 使用自定义主颜色
),
),
],
),
),
);
}
}
通过以上步骤，你就可以在Flutter项目中集成并使用adwaita插件来自定义你的应用主题或UI风格了。
