Every time I do a flutter create project I get the default “counter” sample app full of comments.
While it’s great for the very first time, I now want to get up and running with a minimal base app that fits in my screen.
Here are a few options to copy-paste into lib/main.dart.
// lib/main.dart
import 'package:flutter/widgets.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(context) => Center(
child: Text('Hello Flutter!', textDirection: TextDirection.ltr)
);
}
Can’t get smaller than this!
See it live:
// lib/main.dart
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello World'),
),
),
);
}
}
See it live:
import 'package:flutter/material.dart';
main() => runApp(MinimalStatefulApp());
class MinimalStatefulApp extends StatefulWidget {
@override
_MinimalState createState() => _MinimalState();
}
class _MinimalState extends State<MinimalStatefulApp> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return GestureDetector(
onDoubleTap: () => setState(() => _counter++),
child: Center(
child: Text(
'Counter: $_counter',
textDirection: TextDirection.ltr,
),
),
);
}
}
See it live (double tap to increment):
flutter_hooks)// lib/main.dart
import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
main() => runApp(MyApp());
class MyApp extends HookWidget {
@override
Widget build(context) {
final counter = useState(0);
return GestureDetector(
onDoubleTap: () => counter.value++,
child: Center(
child: Text(
'Counter: ${counter.value}',
textDirection: TextDirection.ltr,
),
),
);
}
}
It uses hooks which remove the boilerplate of a classic StatefulWidget. Make sure you add the flutter_hooks dependency to pubspec.yaml!