Flutter UI风格插件libadwaita的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter UI风格插件libadwaita的使用

Libadwaita ❤️ Flutter

CI GitHub Super-Linter Pub.dev License Maintainer

Libadwaita 的 Flutter 小部件。遵循 GNOME HIG,并且在所有平台上可用。

libadwaita example screenshot

注意: 如果要从 gtk 3.0 主题获取颜色,请使用版本 <=0.9.8+1

特性

  • 各种 Libadwaita 小部件移植到 Flutter
  • 提供了一些新的小部件,更多信息请查看示例
  • 兼容 各种包

使用方法

  • 该库仅提供小部件,对于主题化,建议使用 adwaitayaru 包。
  • 如果需要自定义标题栏,则可以参考 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(),
      // ...
    )
    

经典 API 文档

贡献者

支持开发

为了维持这个库的开发,我们需要有人通过代码或捐赠来帮助这个库。捐赠将帮助我们在这个未维护的开源包世界中生存下来,并投入更多时间来改进这个库,使其达到应有的水平。我们还将在 README 部分添加贡献者或捐赠者的姓名。

直接捐赠请点击以下链接,不要忘记留言:

Buy Me A Coffee

许可证

  • 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

1 回复

更多关于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风格:

  1. 主题定制:通过ThemeData定制了应用的主题,包括主色调、文字样式和按钮样式。
  2. 圆角:为卡片和按钮设置了圆角。
  3. 平坦的AppBar:通过设置AppBarelevation为0来创建平坦的顶部栏。

这只是一个非常基础的示例,libadwaita风格可能还包含更多的细节和元素,比如特定的颜色、字体、动画等。在实际项目中,你可能需要更深入地定制Flutter的主题和组件来达到更接近libadwaita的效果。

回到顶部