flutter_fc 0.2.0

Writing Function Component in Flutter, just as writing in React.

() => Text("FC in Flutter")

An easy way to create Functional Components (FC) in Flutter.

The FC is in development.

Features

• ⏱️ No code generation
• 🖨️ No classes verbosing
• 📄 Tiny implementations
• 🧭 Function oriented
• 🐇 Speed up developing
• 🧱 Hot reload

Install

For destructing records type. Dart 3 or greater version is required.

# ensure dart version >= 3
environment:
  sdk: '^3.0.0'

dependencies:
  flutter_fc: <latest version>

Equip Powerful Hooks

Currently supports these hooks as following:

• useState
• useEffect
• useMemo
• useRef
• useBuildContext
• useImperativeHandle

Quick Example: Define a Counter FC

final Counter = defineFC((props) {
  final (counter, setCounter) = useState(0);
  return ElevatedButton(
    onPressed: () => setCounter(counter + 1),
    child: Text("Counter: $counter"),
  );
});

void main() {
  runApp(MaterialApp(home: Counter()));
}

Development Tips

Hot Reload

Dynamic closures are not reassembled during hot reload.

// CounterFC will NOT schedule a rebuild after a hot reload.
final Counter = defineFC((props) {
  final (counter, setCounter) = useState(0);
  return ElevatedButton(
    onPressed: () => setCounter(counter + 1),
      child: Text("Counter: $counter"),
  );
});

To apply hot reload, split the function as a constant field.

// After moving outside, widget editied within function will be applied during hot reload.
_Counter(props) {
  final (counter, setCounter) = useState(0);
  return ElevatedButton(
    onPressed: () => setCounter(counter + 1),
      child: Text("Counter: $counter"),
  );
}
final Counter = defineFC(_Counter);

Ignore Naming Warnings

To avoid IDE lint warnings, include FC preset.

# analysis_options.yaml
include: package:flutter_fc/lints.yaml

or configure manually.

linter:
  rules:
    non_constant_identifier_names: false
    body_might_complete_normally_nullable: false

Acknowledgement

React

Dart 3

License

MIT (c) 2023-present, Luo3House.