ml-opensource / ml-opensource/flutter-template
Consider following screen/body approach
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 37
- Forks
- 23
- PR merge metrics
- No merged PRs in 30d
Description
The problem
When creating a screen, sometimes we need to add a lot of top-level configuration widgets:
// screen.dart
@override
Widget build(BuildContext context) {
// 1
return FocusScopeDismissible(
// 2
child: BlocProvider<Bloc>(
create: (context) => injector(),
// Aand the actual UI comes at this point...
// 3
child: Scaffold(
// Aand the core part of it is here
body: Column(
children: const [],
),
),
),
);
}
At least 3 top-level things just to make the screen work normally. And it can be more.
The solution
The body of the screen could be moved to a separate widget:
// screen.dart
@override
Widget build(BuildContext context) {
return FocusScopeDismissible(
child: BlocProvider<Bloc>(
create: (context) => injector(),
child: Scaffold(
body: const ScreenBody(),
),
),
);
}
...
class ScreenBody extends StatelessWidget {
const ScreenBody({super.key});
@override
Widget build(BuildContext context) {
// The bloc's data could still be accessible via selectors and bloc builders
final stateData = context.select((Bloc bloc) => bloc.state.data);
return const Text("I'm the actual UI of the screen!");
}
}
Pros
- Makes you to follow smaller widgets approach;
- Reduces the waterfall in the body of a screen.
Cons
- So far I don't see it. We followed this approach on two projects and it was quite good.
Additional instruments that may help us
We can write a simple script that will generate the files on command from our IDE. I have already written a very similar script for a VSCode extension for my package, it is here. It can be a create_feature, not a module.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the screen and ScreenBody examples in the issue, then inspect extensions/vscode/src/commands/create_module.ts for the referenced generator pattern. Determine whether the project wants a documented screen/body convention, a create_feature generator, or both. Done should be an agreed approach with repository changes and any generator behavior validated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter, typescript, vscode
- Domain
- developer-experience, mobile-dev, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100