Typically you want to break up huge widget trees by creating your own
widgets. Here's an example of that refactoring:
void main() {
runApp(MaterialApp(
home: Scaffold(
backgroundColor: Colors.deepPurple,
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.red],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)),
child: const Center(
child: Text("Hello World!",
style: TextStyle(color: Colors.white, fontSize: 30)))),
)));
}
Widgets are objects, and creating a new widget is the same as
instantiating a new object from a class.
void main() {
runApp(MaterialApp(
home: Scaffold(
backgroundColor: Colors.deepPurple,
// Replace the body with our new widget
body: GradientContainer()
)));
}
class GradientContainer extends StatelessWidget {
// MISSING: Constructor Function, see below
@override
Widget build(BuildContext context) {
return Container(
decoration: // ... //
child: const Center(child: Text("Hello World!",
style: TextStyle(color: Colors.white, fontSize: 30))));
}
}
The constructor function defines the data that must be passed to our
widget.
- Optional args wrapped in
[] - Default values assigned with
= - Use
required to ensure named parameters are passed
// Positional arguments (required by default)
const GradientContainer(a, b, [c, d=5]);
// Named arguments
const GradientContainer({a, required b, c=3});
// Necessary scaffolding
const GradientContainer({key}): super(key: key);
// Shortcut for the above
const GradientContainer({super.key});
You can add multiple constructor functions to one class. By providing
multiple constructors with different defaults, you can easily provide
shortcuts to instantiating slight variations on your widget.
GradientContainer.red({super.key, required this.children}) : colors = [Colors.deepOrange, Colors.red];
Note: To organize your project, move your widgets to
lowercase_name.dart files. This is convention. They can then be
imported into your main view with a line like the following, using
your project name:
import 'package:your_flutter_app/gradient_container.dart';
While we are discussing conventions, here are a few:
ClassNames // Classes start with an uppercase
variableNames // Variables start with a lowercase
// Ending a variable with '?' allows it to be null
var Alignment startAlignment?;
const means something is a compile-time constant and will not change.
You cannot use const to 'lock' a widget that depends on variables.
Pass data into classes with the constructor function:
class GradientContainer extends StatelessWidget {
const GradientContainer({super.key, required this.children});
// 'final' means single-assignment
final List<Widget> children;
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.red],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)),
child: Center(
child: c.Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: children)));
}
}
// Usage:
GradientContainer(children: [
Text("Hello World!")
])
