Flutter插件dlutter的使用方法详解

Flutter插件dlutter的使用方法详解

Make it ease to typing

考虑以下代码：

InkWell(
    onTap: () {
      print('do something here');
    },
    child: const Padding(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: SizedBox(
        width: double.infinity,
        child: Center(
          child: Text(
            'cancel',
            style: TextStyle(fontSize: 14, color: Colors.red),
          ),
        ),
      ),
    ),
  )

再来看看另一种方式：

'cancel'
        .toText(size: 14, color: Colors.red)
        .toCenter()
        .toSizedBox(double.infinity)
        .toPadding(10.toEdgePaddingVertical())
        .toInkWell(
    onTap: () {
        print('do something here');
    },
)

Caution

• 不建议在具有复杂布局的大页面中使用这种编码风格。
• 应该将复杂的布局拆分成小块，并逐步应用这种编码风格。
• 参考讨论帖：function widget vs class widget
• 最后，尽情享受并展示你的风格吧！

完整示例Demo

下面是一个完整的示例，展示了如何使用上述两种方法来构建一个简单的Flutter界面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('dlutter Plugin Demo')),
        body: Center(
          child: DemoWidget(),
        ),
      ),
    );
  }
}

class DemoWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用传统方式
    final traditionalWidget = InkWell(
      onTap: () {
        print('传统方式点击');
      },
      child: const Padding(
        padding: EdgeInsets.symmetric(vertical: 10),
        child: SizedBox(
          width: double.infinity,
          child: Center(
            child: Text(
              '取消',
              style: TextStyle(fontSize: 14, color: Colors.red),
            ),
          ),
        ),
      ),
    );

    // 使用链式调用方式
    final chainCallWidget = '取消'
        .toText(size: 14, color: Colors.red)
        .toCenter()
        .toSizedBox(double.infinity)
        .toPadding(10.toEdgePaddingVertical())
        .toInkWell(
      onTap: () {
        print('链式调用方式点击');
      },
    );

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        traditionalWidget,
        SizedBox(height: 20),
        chainCallWidget,
      ],
    );
  }
}

// 延伸方法定义
extension MyExtensions on String {
  Widget toText({double size, Color color}) {
    return Text(this, style: TextStyle(fontSize: size, color: color));
  }

  Widget toCenter() {
    return Center(child: this);
  }

  Widget toSizedBox(double width) {
    return SizedBox(width: width, child: this);
  }

  EdgeInsetsGeometry toEdgePaddingVertical() {
    return EdgeInsets.symmetric(vertical: this);
  }

  Widget toPadding(EdgeInsetsGeometry padding) {
    return Padding(padding: padding, child: this);
  }

  Widget toInkWell({VoidCallback onTap}) {
    return InkWell(onTap: onTap, child: this);
  }
}