build method
- BuildContext context
Describes the part of the user interface represented by this widget.
The framework calls this method in a number of different situations. For example:
- After calling initState.
- After calling didUpdateWidget.
- After receiving a call to setState.
- After a dependency of this State object changes (e.g., an InheritedWidget referenced by the previous build changes).
- After calling deactivate and then reinserting the State object into the tree at another location.
This method can potentially be called in every frame and should not have any side effects beyond building a widget.
The framework replaces the subtree below this widget with the widget returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the widget returned by this method can update the root of the existing subtree, as determined by calling Widget.canUpdate.
Typically implementations return a newly created constellation of widgets that are configured with information from this widget's constructor, the given BuildContext, and the internal state of this State object.
The given BuildContext contains information about the location in the
tree at which this widget is being built. For example, the context
provides the set of inherited widgets for this location in the tree. The
BuildContext argument is always the same as the context property of
this State object and will remain the same for the lifetime of this
object. The BuildContext argument is provided redundantly here so that
this method matches the signature for a WidgetBuilder.
Design discussion
Why is the build method on State, and not StatefulWidget?
Putting a Widget build(BuildContext context) method on State rather
than putting a Widget build(BuildContext context, State state) method
on StatefulWidget gives developers more flexibility when subclassing
StatefulWidget.
For example, AnimatedWidget is a subclass of StatefulWidget that
introduces an abstract Widget build(BuildContext context) method for its
subclasses to implement. If StatefulWidget already had a build method
that took a State argument, AnimatedWidget would be forced to provide
its State object to subclasses even though its State object is an
internal implementation detail of AnimatedWidget.
Conceptually, StatelessWidget could also be implemented as a subclass of StatefulWidget in a similar manner. If the build method were on StatefulWidget rather than State, that would not be possible anymore.
Putting the build function on State rather than StatefulWidget also
helps avoid a category of bugs related to closures implicitly capturing
this. If you defined a closure in a build function on a
StatefulWidget, that closure would implicitly capture this, which is
the current widget instance, and would have the (immutable) fields of that
instance in scope:
// (this is not valid Flutter code)
class MyButton extends StatefulWidgetX {
MyButton({super.key, required this.color});
final Color color;
@override
Widget build(BuildContext context, State state) {
return SpecialWidget(
handler: () { print('color: $color'); },
);
}
}
For example, suppose the parent builds MyButton with color being blue,
the $color in the print function refers to blue, as expected. Now,
suppose the parent rebuilds MyButton with green. The closure created by
the first build still implicitly refers to the original widget and the
$color still prints blue even through the widget has been updated to
green; should that closure outlive its widget, it would print outdated
information.
In contrast, with the build function on the State object, closures created during build implicitly capture the State instance instead of the widget instance:
class MyButton extends StatefulWidget {
const MyButton({super.key, this.color = Colors.teal});
final Color color;
// ...
}
class MyButtonState extends State<MyButton> {
// ...
@override
Widget build(BuildContext context) {
return SpecialWidget(
handler: () { print('color: ${widget.color}'); },
);
}
}
Now when the parent rebuilds MyButton with green, the closure created by
the first build still refers to State object, which is preserved across
rebuilds, but the framework has updated that State object's widget
property to refer to the new MyButton instance and ${widget.color}
prints green, as expected.
See also:
- StatefulWidget, which contains the discussion on performance considerations.
Implementation
@override
Widget build(BuildContext context) {
Flavor flavor = catppuccin.latte;
return Scaffold(
appBar: AppBar(
backgroundColor: flavor.mantle,
// The title aligned to the left.
//title: const Text(appTitle),
title: Row(
children: [
Image.asset(
'assets/icons/icon.png',
width: 40,
height: 40,
),
configWidgetGap,
MarkdownBody(
data: appTitle,
onTapLink: (text, href, title) {
final Uri url = Uri.parse(href ?? '');
launchUrl(url);
},
styleSheet: MarkdownStyleSheet(
p: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
a: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
],
),
// Deploy the buttons aligned to the top right for actions.
actions: [
// 20250113 gjw The version number is reported in the About popup but
// for screenshots, during development it is useful to have the
// version visiable at all times so place it on the title bar. Users
// have also noted it and seems useful to have it exposed.
MarkdownTooltip(
message: '''
**Version:** ${_isLatest ? '''*Rattle* is regularly updated to bring you the best
experience for Data Science, AI and Machine Learning. The latest
version is always available from the
[Rattle](https://togaware.com/projects/rattle/) website. **Tap** on
the **Version** text here in the title bar to visit the *CHANGELOG*
in your browser and so see a list of all changes to Rattle.
''' : '*A newer version is available!* Visit [Rattle](https://rattle.togaware.com) for instructions on updating your installation.'}
''',
child: GestureDetector(
onTap: () async {
// 20250107 gjw Always go to the CHANGELOG irrespective of
// latest version or not. That is where information about the
// version comes from. The original alternative was to go to the
// Rattle page if a new release is available, presumably to see
// the install instructions. I think it makes more sense for the
// user to see what has changed.
final Uri url = Uri.parse(_changelogUrl);
if (await canLaunchUrl(url)) {
await launchUrl(url);
} else {
debugPrint('Could not launch $_changelogUrl');
}
},
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
'Version $_appVersion',
style: TextStyle(
color: _isLatest ? Colors.blue : Colors.red,
fontSize: 16,
),
),
),
),
),
const SizedBox(width: 50),
// Reset.
MarkdownTooltip(
message: '''
**Reset:** Tap here to clear the current project and so start a new
project with a new dataset. You will be prompted to confirm since
you will lose all of the current pages and analyses.
''',
child: IconButton(
icon: const Icon(
Icons.autorenew,
color: Colors.blue,
),
onPressed: () async {
// Set isResetProvider to true
ref.read(isResetProvider.notifier).state = true;
// TODO yyx 20240611 return focus to DATASET TAB and set the sub tabs to the first tabs (put it in reset)
if (ref.read(datasetLoaded)) {
showDatasetAlertDialog(context, ref, false);
} else {
await reset(context, ref);
}
},
),
),
MarkdownTooltip(
message: '''
**Change Seed:** Tap here to quickly change the seed for the random
number generator. A new seed will be automatically generated. It
will also be saved as your new seed within **Settings** and so the
latest seed set here will be used in your next session. Go to
**Settings** to reset the seed back to the application's
default. The button is only active once a dataset is loaded.
''',
child: Consumer(
builder: (context, ref, child) {
// Listen to the partitionProvider and datasetLoaded.
final isPartitionEnabled = ref.watch(partitionProvider);
final isDatasetLoaded = ref.watch(datasetLoaded);
// Enable the button only if both conditions are true.
final isButtonEnabled = isPartitionEnabled && isDatasetLoaded;
return IconButton(
icon: Icon(
Icons.shuffle,
color: isButtonEnabled ? Colors.blue : Colors.grey,
),
onPressed: isButtonEnabled
? () async {
// Generate a new random seed.
final newSeed =
DateTime.now().millisecondsSinceEpoch % 100000;
ref.read(randomSeedSettingProvider.notifier).state =
newSeed;
final prefs = await SharedPreferences.getInstance();
await prefs.setInt('randomSeed', newSeed);
// Show a confirmation or snack bar.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Random seed changed to: $newSeed'),
),
);
}
// Disable the button if conditions are not met.
: null,
);
},
),
),
// 20240726 gjw Remove the global SAVE button for now in favour of the
// local widget save buttons. It is probably a better concept to have
// the save buttons associated with the individual widgets than trying
// to find the current widget and calling a save() if it has one.
// SAVE - Context specific.
// IconButton(
// icon: const Icon(
// Icons.save,
// color: Colors.grey,
// ),
// onPressed: () {
// debugPrint('SAVE PRESSED NO ACTION YET');
// },
// tooltip: 'TODO: Save the current view to file.',
// ),
// Install R Packages
MarkdownTooltip(
message: '''
**R Packages Installation:** Tap here to load all required R
pacakges now rather than when they are needed. It can be useful to
do this before you load a dataset so as to ensure everything is
ready. This can avoid some issues on startup. Rattle will check for
any R packages that need to be installed and will install them. This
could take some time, *upwards of 5 minutes,* for example. After
starting this installation do check the **Console** tab for details
and progress.
''',
child: IconButton(
icon: const Icon(
Icons.download,
color: Colors.blue,
),
onPressed: () async {
showOk(
context: context,
title: 'Install R Packages',
content: '''
Rattle is now checking each of the requisite **R Packages**
and if not available on your local installation it will be
downloaded and installed. This can take some time (**five
minutes** or more) depending on how many packages need to be
installed. Please check the **Console** tab to monitor
progress. Type *Ctrl-C* in the **Console** to abort.
''',
);
await rSource(context, ref, ['packages']);
// TODO 20241014 gjw HOW TO NAVIGATE TO THE CONSOLE TAB
},
),
),
// Settings.
MarkdownTooltip(
message: '''
**Settings:** Tap here to update your default settings. At present we
have just one setting: ggplot theme. The default theme is the simple
and clean Rattle theme but there are many themes to choose
from. Your settings will be saved for this session and you have the
option to reset to the Rattle defaults.
''',
child: IconButton(
icon: const Icon(
Icons.settings,
color: Colors.blue,
),
onPressed: () async {
showSettingsDialog(context);
},
),
),
// Info - about.
MarkdownTooltip(
message: '''
**About:** Tap here to view information about the Rattle
project. This include a list of those who have contributed to the
latest version of the software, *Verison 6.* It also includes the
extensive list of open-source packages that Rattle is built on and
their licences.
''',
child: IconButton(
onPressed: () {
showAboutDialog(
context: context,
applicationIcon: Image.asset(
'assets/icons/icon.png',
width: 80,
height: 80,
),
applicationName:
'${_appName[0].toUpperCase()}${_appName.substring(1)}',
applicationVersion: 'Version $_appVersion',
applicationLegalese: '© 2006-2025 Togaware Pty Ltd\n',
children: [
MarkdownBody(
data: about,
selectable: true,
softLineBreak: true,
onTapLink: (text, href, about) {
final Uri url = Uri.parse(href ?? '');
launchUrl(url);
},
),
],
);
},
icon: const Icon(
Icons.info,
color: Colors.blue,
),
),
),
],
),
// Build the tab bar from the list of homeTabs, noting the tab title and
// icon. We rotate the tab bar for placement on the left edge.
body: Row(
children: [
ScrollConfiguration(
behavior:
ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: SingleChildScrollView(
child: SizedBox(
// Constrain height to the height of the screen.
// To place the NavigationRail on top of the Column.
height: MediaQuery.of(context).size.height,
child: NavigationRail(
selectedIndex: _tabController.index,
onDestinationSelected: (int index) {
setState(() {
_tabController.index = index;
});
},
labelType: NavigationRailLabelType.all,
destinations: homeTabs.map((tab) {
return NavigationRailDestination(
icon: Icon(tab['icon']),
label: Text(
tab['title'],
style: const TextStyle(fontSize: 16),
),
padding: const EdgeInsets.symmetric(vertical: 8.0),
);
}).toList(),
selectedLabelTextStyle: const TextStyle(
color: Colors.deepPurple,
fontWeight: FontWeight.bold,
),
unselectedLabelTextStyle: TextStyle(color: Colors.grey[500]),
),
),
),
),
const VerticalDivider(),
Expanded(
child: IndexedStack(
index: _tabController.index,
children: _tabWidgets,
),
),
],
),
bottomNavigationBar: const StatusBar(),
);
}