flutter 组件化

function_widget.dart

import 'package:flutter/material.dart';

Widget helloRect() {
  return Container(
    color: Colors.purple,
    width: 200,
    height: 200,
    margin: EdgeInsets.all(16),
    child: Center(child: Text('Hi')),
  );
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
        body: Center(
          child: helloRect(),
        )
      )
    );
  }
}

stateful_widget.dart

class TextForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TextForm();
  }
}

class _TextForm extends State<TextForm> {
  final TextEditingController editController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: TextField(
            controller: editController,
          ),
        ),
        RaisedButton(
          child: Text('click'),
          onPressed: () {
            print('text: ${editController.text}');
          },
        )
      ],
    );
  }
}

stateless_widget.dart

import 'package:flutter/material.dart';

class HelloRect extends StatelessWidget {
  final String text;

  HelloRect({this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.purple,
      width: 200,
      height: 200,
      margin: EdgeInsets.all(16),
      child: Center(child: Text(text)),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
        body: Center(
            child: HelloRect(text: 'Hi')
        )
      )
    );
  }
}

stateless_widget_multi_params.dart

import 'package:flutter/material.dart';

class HelloRect extends StatelessWidget {
  String text;
  Color background;
  num w, h;

  HelloRect({
    @required this.text,  // 必传参数
    this.background = Colors.purple,  // 参数默认值为 Colors.purple
    this.w = 200.0,
    this.h = 200.0,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      color: this.background,
      width: this.w,
      height: this.h,
      margin: EdgeInsets.all(16),
      child: Center(child: Text(this.text)),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
        body: Center(
            child: HelloRect( // 以下几个参数均为命名参数
              text: 'Hi',
              background: Colors.green,
              w: 150.0,
              h: 100.0,
            )
        )
      )
    );
  }
}