Flutter自定义组件插件priyank_widgets的使用

Flutter自定义组件插件priyank_widgets的使用

在本插件中，我们可以使用一些常量部件，如按钮、文本框和圆形图像。

特性

使用以下部件：

• Button
• ButtonPostIcon
• CircularAssetImage
• CircularNetworkImage
• TextField

使用示例

以下是一个完整的示例代码，展示如何在你的Flutter应用中使用priyank_widgets插件。

示例代码

import 'package:flutter/material.dart';
import 'package:priyank_widgets/priyank_widgets.dart'; // 导入插件

void main() {
  runApp(const MyApp()); // 运行应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 构造函数

  // 应用根部件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Priyank Widget', // 应用标题
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 颜色方案
        useMaterial3: true, // 使用Material 3设计
      ),
      home: const MyHomePage(title: 'Priyank Widget'), // 主页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title}); // 构造函数

  final String title; // 页面标题

  @override
  State<MyHomePage> createState() => _MyHomePageState(); // 创建状态
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // 设置背景颜色
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: [
            // 使用ConstantWidget的button方法创建一个按钮
            ConstantWidget().button(
              title: 'Button', // 按钮标题
              onPress: () {}, // 按钮点击事件
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 导入插件：

   import 'package:priyank_widgets/priyank_widgets.dart';
   

2. 创建应用：

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

3. 配置主题：

   theme: ThemeData(
     colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
     useMaterial3: true,
   ),
   

4. 主页面：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
     
     final String title;
     
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 构建界面：

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               ConstantWidget().button(
                 title: 'Button',
                 onPress: () {},
               ),
             ],
           ),
         ),
       );
     }
   }