fule_view 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 50

fule_view #

Pub Version GitHub

一个简单的视图容器组件,它允许你监听onTap、onDoubleTap、onLongTap事件。

开始 #

安装 #

该项目还在探索阶段,对外接口可能会存在较大变化,请选择好使用的版本。

在pubspec.yaml中添加依赖包

使用相对稳定的版本
fule_text: '>=0.2.0 <0.3.0'
或始终使用最新版本
fule_text: '^0.2.0'

获取依赖包

$ flutter pub get

引入 #

import 'package:fule_view/fule_view.dart';

上面演示的源码 #

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  String msg = '在Stack布局中,会正好为子组件的大小';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FuleView'),
        ),
        body: ListView(
          children: <Widget>[
            FuleView(
              child: Text('你好 我是最简单的FuleView'),
            ),
            FuleView(
              backgroundColor: Colors.grey[500],
              margin: [10],
              child: Text('margin和padding的类型为 List<double>'),
            ),
            FuleView(
              margin: [15, 10],
              padding: [0, 10, 15],
              backgroundColor: Colors.yellow,
              child: Text('顺序为上右下左,就像CSS里那样'),
            ),
            FuleView(
              child: Text('可以快速地做出按钮效果👇'),
            ),
            Stack(
              children: <Widget>[
                FuleView(
                  backgroundColor: Colors.greenAccent,
                  margin: [5],
                  padding: [10],
                  borderRadiusWidth: 20,
                  boxShadowColor: Colors.green[100],
                  boxShadowBlurRadius: 4,
                  boxShadowSpreadRadius: 1,
                  child: Text(msg),
                  onTap: () {
                    print('onTap');
                    setState(() {
                      msg = '现在只支持监听onTap';
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

参数 #

  • margin 和 padding 类型为List<double>,接收1-4个参数,顺序为上右下左
  • 使用 border 后, borderWidth 、 borderColor 、 borderStyle 会无效
  • 使用 borderRadius 后, borderRadiusWidth 会无效
属性类型默认值必填说明组件版本
widthdouble-宽度0.2.0
heightdouble-高度0.2.0
marginList<double>[0]外边距0.2.0
paddingList<double>[0]内边距0.2.0
childWidget-子组件0.2.0
backgroundColorColorColors.transparent背景颜色0.2.0
onTapVoidCallback-点击事件0.2.0
onDoubleTapVoidCallback-双击事件0.2.0
onLongPressVoidCallback-长按事件0.2.0
borderBorder-边框自定义设置0.2.0
borderWidthdouble0边框宽度0.2.0
borderColorColorColors.black边框颜色0.2.0
borderStyleBorderStyle-边框样式0.2.0
borderRadiusBorderRadius-圆角自定义设置0.2.0
borderRadiusWidthdouble0圆角半径0.2.0
boxShadowColorColorColors.transparent阴影颜色0.2.0
boxShadowBlurRadiusdouble0切换回调函数0.2.0
boxShadowSpreadRadiusdouble0切换回调函数0.2.0

TODO #

  • [x] 实现更多种事件监听
  • [ ] 实现点击的颜色变化效果

[0.2.0] 2020-05-04 #

  • 将InkWell切换成GestureDetector

[0.1.1] 2020-04-20 #

  • bug fix

[0.1.0] 2020-04-19 #

  • FuleView项目初始化

example/main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  String msg = '在Stack布局中,会正好为子组件的大小';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FuleView'),
        ),
        body: ListView(
          children: <Widget>[
            FuleView(
              child: Text('你好 我是最简单的FuleView'),
            ),
            FuleView(
              backgroundColor: Colors.grey[500],
              margin: [10],
              child: Text('margin和padding的类型为 List<double>'),
            ),
            FuleView(
              margin: [15, 10],
              padding: [0, 10, 15],
              backgroundColor: Colors.yellow,
              child: Text('顺序为上右下左,就像CSS里那样'),
            ),
            FuleView(
              child: Text('可以快速地做出按钮效果👇'),
            ),
            Stack(
              children: <Widget>[
                FuleView(
                  backgroundColor: Colors.greenAccent,
                  margin: [5],
                  padding: [10],
                  borderRadiusWidth: 20,
                  boxShadowColor: Colors.green[100],
                  boxShadowBlurRadius: 4,
                  boxShadowSpreadRadius: 1,
                  child: Text(msg),
                  onTap: () {
                    print('onTap');
                    setState(() {
                      msg = '现在只支持监听onTap';
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  fule_view: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:fule_view/fule_view.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
50
Learn more about scoring.

We analyzed this package on Jul 3, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [fule_view] that is in a package requiring null.

Health suggestions

Format lib/fule_view.dart.

Run flutter format to format lib/fule_view.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test