flutter_fc 0.2.1 copy "flutter_fc: ^0.2.1" to clipboard
flutter_fc: ^0.2.1 copied to clipboard

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

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

Pub Version Github Action

An easy way to create Functional Components (FC) in Flutter, with composable hooks.

The FC is in development.

Features #

  • ⏱️ No code generation
  • 🖨️ No classes verbosing
  • 📄 Tiny implementations
  • 🧭 Function oriented
  • 🪝 With powerful composable hooks
  • 🐇 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
  • useImperativeHandle
  • useBuildContext

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.

3
likes
0
pub points
32%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on flutter_fc