Flutter控制功能插件fcontrol的使用

Flutter控制功能插件fcontrol的使用

本项目是一个用于 Flutter 的插件起点，它包括 Android 和/或 iOS 的平台特定实现代码。

开始使用

对于 Flutter 初学者，可以查看我们的在线文档，其中包括教程、示例、移动开发指南和完整的 API 参考。

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

import 'package:fbutton/fbutton.dart';
import 'package:fcontrol/fcontrol.dart';
import 'package:fcontrol/finnershadow.dart';
import 'package:flutter/material.dart';
import 'package:fsuper/fsuper.dart';

void main() {
  // debugProfilePaintsEnabled = true;
  debugProfileBuildsEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Neumorphism.io'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double fcontrolsize = 200;
  Color color = Colors.blue;
  Color backgroundColor = Colors.white;

  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
//        backgroundColor: Color.fromARGB(255, 85, 185, 243),
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Center(
                child: FControl(
                  color: backgroundColor,
                  child: FSuper(
                    width: 100,
                    height: 100,
                    corner: Corner.all(100),
                    backgroundColor: Colors.blue,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 50.0),
            FButton(
              text: "改变颜色",
              style: TextStyle(color: Colors.white),
              padding: EdgeInsets.all(9.0),
              color: Colors.blue[200],
              onPressed: () {
                setState(() {
                  color = Colors.purple;
                  backgroundColor = Colors.yellow;
                });
              },
              effect: true,
            ),
            const SizedBox(height: 50.0),
          ],
        ));
  }
}

代码解析

1. 导入必要的库：

   import 'package:fbutton/fbutton.dart';
   import 'package:fcontrol/fcontrol.dart';
   import 'package:fcontrol/finnershadow.dart';
   import 'package:flutter/material.dart';
   import 'package:fsuper/fsuper.dart';
   

2. 主函数：

   void main() {
     // debugProfilePaintsEnabled = true;
     debugProfileBuildsEnabled = true;
     runApp(MyApp());
   }
   

3. 定义 MyApp 类：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         title: 'Flutter Demo',
         home: MyHomePage(title: 'Neumorphism.io'),
       );
     }
   }
   

4. 定义 MyHomePage 类：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   

5. 定义 _MyHomePageState 类：

   class _MyHomePageState extends State<MyHomePage> {
     double fcontrolsize = 200;
     Color color = Colors.blue;
     Color backgroundColor = Colors.white;
   
     void initState() {
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
           appBar: AppBar(
             title: Text(widget.title),
           ),
           body: Column(
             children: [
               Padding(
                 padding: EdgeInsets.all(10),
                 child: Center(
                   child: FControl(
                     color: backgroundColor,
                     child: FSuper(
                       width: 100,
                       height: 100,
                       corner: Corner.all(100),
                       backgroundColor: Colors.blue,
                     ),
                   ),
                 ),
               ),
               const SizedBox(height: 50.0),
               FButton(
                 text: "改变颜色",
                 style: TextStyle(color: Colors.white),
                 padding: EdgeInsets.all(9.0),
                 color: Colors.blue[200],
                 onPressed: () {
                   setState(() {
                     color = Colors.purple;
                     backgroundColor = Colors.yellow;
                   });
                 },
                 effect: true,
               ),
               const SizedBox(height: 50.0),
             ],
           ));
     }
   }