Flutter UI风格插件libadwaita的使用
Flutter UI风格插件libadwaita的使用
Libadwaita ❤️ Flutter
Libadwaita 的 Flutter 小部件。遵循 GNOME HIG,并且在所有平台上可用。
注意: 如果要从 gtk 3.0 主题获取颜色,请使用版本 <=0.9.8+1
。
特性
- 各种 Libadwaita 小部件移植到 Flutter
- 提供了一些新的小部件,更多信息请查看示例
- 兼容 各种包
使用方法
- 该库仅提供小部件,对于主题化,建议使用 adwaita 或 yaru 包。
- 如果需要自定义标题栏,则可以参考 libadwaita_bitsdojo 包中的步骤。
- 这里是从小部件库导入的小部件列表:widgets.dart。
更多详细信息请参阅 示例应用。
相关链接
额外信息
该包与以下包配合使用效果最佳
可选包
adwaita_icons
- 用于 Adwaita 图标
libadwaita_bitsdojo
- 示例:
import 'package:libadwaita_bitsdojo/libadwaita_bitsdojo.dart'; AdwHeaderBar( actions: AdwActions().bitsdojo, // ... )
libadwaita_searchbar
- 示例:
import 'package:libadwaita_searchbar/libadwaita_searchbar.dart'; bool searchedTerm = ''; AdwSearchBar( onSubmitted: (str) => setState(() => searchedTerm = str), controller: const TextEditingController(), // ... )
libadwaita_searchbar_ac
- 示例:
import 'package:libadwaita_searchbar_ac/libadwaita_searchbar_ac.dart'; bool searchedTerm = ''; AdwSearchBarAc( suggestions: const ['Hi', 'Hello'], onSubmitted: (str) => setState(() => searchedTerm = str), controller: const TextEditingController(), // ... )
libadwaita_nativeshell
- 示例:
import 'package:libadwaita_nativeshell/libadwaita_nativeshell.dart'; AdwHeaderBar( actions: AdwActions().nativeshell(context), // ... )
libadwaita_titlebar_buttons
- 示例:
import 'package:libadwaita_titlebar_buttons/libadwaita_titlebar_buttons.dart'; AdwHeaderBar( controls: AdwControls().titlebarButtons(), // ... )
贡献者
- 基于 贡献者排名 和提交的价值
- @prateekmedia - 创建者和维护者
- @simrat39 - 添加了各种小部件并改进了示例应用
- @MalcolmMielle - 在 adwaita 主题方面工作并创建了 CI
- @jesusrp98 - 添加了
AdwButton
、AdwAvatar
等小部件并改进了一些小部件 - @pablojimpas - 添加了
very_good_analysis
并修复了一些代码
支持开发
为了维持这个库的开发,我们需要有人通过代码或捐赠来帮助这个库。捐赠将帮助我们在这个未维护的开源包世界中生存下来,并投入更多时间来改进这个库,使其达到应有的水平。我们还将在 README 部分添加贡献者或捐赠者的姓名。
直接捐赠请点击以下链接,不要忘记留言:
许可证
- Mozilla Public License 2.0
简而言之:
- 您可以在任何应用程序中自由使用此包
- 如果您改进了此包,则应将您的补丁/改进提交到此仓库
示例代码
Demo App
这里 是一个使用 libadwaita 包制作的示例应用。
插件
HeaderBar 窗口操作
bitsdojo_window 示例
nativeshell 示例
window_manager 示例
HeaderBar 控制按钮
titlebar_buttons 示例
UI 相关
Search Bar 示例
Search Bar with easy_autocomplete 示例
更多关于Flutter UI风格插件libadwaita的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter UI风格插件libadwaita的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中,虽然原生没有直接提供对libadwaita(GNOME的Adwaita风格的现代化变体)的支持,但你可以通过一些技巧和第三方库来模仿或实现类似的UI风格。不过,需要注意的是,由于libadwaita是基于GTK的,直接将其集成到Flutter应用中并不现实。但我们可以使用Flutter自身的Widget和一些自定义样式来接近libadwaita的风格。
以下是一个简单的示例,展示如何使用Flutter的一些基本组件和样式来模仿libadwaita风格的UI。这个示例将创建一个带有卡片式布局和圆角按钮的简单界面。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Libadwaita Style Flutter App',
theme: ThemeData(
// 自定义主题以接近libadwaita风格
primarySwatch: Colors.blueGrey, // 使用类似的颜色
brightness: Brightness.light,
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
),
bodyText1: TextStyle(
fontSize: 16,
),
),
buttonTheme: ButtonThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), // 圆角按钮
),
textTheme: ButtonTextTheme.primary,
),
cardTheme: CardTheme(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), // 圆角卡片
),
elevation: 4,
margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Libadwaita Style Demo'),
centerTitle: true,
elevation: 0, // 平坦的AppBar
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welcome to the Libadwaita Style Flutter App',
style: Theme.of(context).textTheme.headline1,
),
SizedBox(height: 16),
Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'This is a card with some text inside.',
style: Theme.of(context).textTheme.bodyText1,
),
SizedBox(height: 16),
TextButton(
onPressed: () {},
child: Text('Action Button'),
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(
Colors.blueGrey.withOpacity(0.12),
),
),
),
],
),
),
),
],
),
),
);
}
}
在这个示例中,我们做了以下几件事来模仿libadwaita风格:
- 主题定制:通过
ThemeData
定制了应用的主题,包括主色调、文字样式和按钮样式。 - 圆角:为卡片和按钮设置了圆角。
- 平坦的AppBar:通过设置
AppBar
的elevation
为0来创建平坦的顶部栏。
这只是一个非常基础的示例,libadwaita风格可能还包含更多的细节和元素,比如特定的颜色、字体、动画等。在实际项目中,你可能需要更深入地定制Flutter的主题和组件来达到更接近libadwaita的效果。