Flutter UI组件库插件imaterial_pro_flutter的使用

Flutter UI组件库插件imaterial_pro_flutter的使用

codecov Test pub package PRs Welcome

imaterial_pro_flutter

这个flutter插件允许你使用IMaterial Pro图标。

安装

在你的pubspec.yaml文件的dependencies:部分添加以下行：

dependencies:
  imaterial_pro_flutter: ^1.0.0

使用

首先，导入该插件：

import 'package:imaterial_pro_flutter/imaterial_pro_flutter.dart';

接下来，创建一个简单的widget来展示这些图标：

class MyAwesomeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Icon(IMaterialProRegular.Power, size: 50.0),
                const SizedBox(height: 30.0),
                Text('Power icon', textAlign: TextAlign.center),
            ],
        ),
    );
  }
}

示例

查看example目录下的flutter应用示例。

示例截图

Bug/请求

如果你遇到任何问题，请随时打开一个issue。如果你觉得库缺少某个功能，请在Github上提一个ticket，我会考虑实现它。Pull requests也是欢迎的。

开发者

Abada Samuel Oghenero

示例代码

import 'package:example/icon_model.dart';
import 'package:flutter/material.dart';
import 'package:imaterial_pro_flutter/imaterial_pro_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Imaterial Pro Icons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Imaterial Pro Icons Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<IconModel> imaterialIcons = [
    IconModel(icon: IMaterialProRegular.Pin_01, name: "Location icon"),
    IconModel(icon: IMaterialProRegular.Alert, name: "Bell icon"),
    IconModel(icon: IMaterialProRegular.Power, name: "Power icon"),
    IconModel(icon: IMaterialProRegular.Notepad, name: "Note icon"),
    IconModel(icon: IMaterialProRegular.Shield, name: "Shield icon"),
    IconModel(icon: IMaterialProRegular.Forward, name: "Forward icon")
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(imaterialIcons[index].icon, size: 50.0),
                const SizedBox(height: 30.0),
                Text(imaterialIcons[index].name, textAlign: TextAlign.center),
              ],
            ),
          );
        },
        itemCount: imaterialIcons.length,
      ),
    );
  }
}

更多关于Flutter UI组件库插件imaterial_pro_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件库插件imaterial_pro_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中集成并使用imaterial_pro_flutter UI组件库插件的示例代码。这个库提供了一系列现代化的Material Design风格的UI组件，可以帮助你快速构建美观的用户界面。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加imaterial_pro_flutter的依赖。确保你的Flutter环境已经配置好，并且你的项目已经初始化。

dependencies:
  flutter:
    sdk: flutter
  imaterial_pro_flutter: ^最新版本号  # 请替换为最新的版本号

然后运行以下命令来安装依赖：

flutter pub get

2. 导入库

在你的Dart文件中导入imaterial_pro_flutter库。

import 'package:imaterial_pro_flutter/imaterial_pro_flutter.dart';

3. 使用组件

下面是一个简单的示例，展示了如何使用imaterial_pro_flutter中的几个UI组件，比如按钮、输入框和卡片。

import 'package:flutter/material.dart';
import 'package:imaterial_pro_flutter/imaterial_pro_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IMaterial Pro Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';

  void _handleSubmit() {
    // 处理提交逻辑
    print('You typed: $_text');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IMaterial Pro Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // 输入框
            IMPTextField(
              labelText: 'Email',
              hintText: 'Enter your email',
              onChanged: (value) => setState(() => _text = value),
            ),
            SizedBox(height: 16),
            // 按钮
            IMPButton(
              buttonType: IMPButtonType.contained,
              color: Colors.blue,
              onPressed: _handleSubmit,
              children: <Widget>[
                Text('Submit'),
              ],
            ),
            SizedBox(height: 32),
            // 卡片
            IMPCard(
              elevation: 8,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Card Title', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                    SizedBox(height: 8),
                    Text('This is some content inside a card.'),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保一切配置正确后，你可以运行你的Flutter应用：

flutter run

这个示例展示了如何在Flutter应用中使用imaterial_pro_flutter库的一些基本组件。你可以根据库的文档探索更多高级组件和自定义选项，以构建更复杂和美观的用户界面。

回到顶部