build method
- BuildContext context
Describes the part of the user interface represented by this widget.
The framework calls this method when this widget is inserted into the tree in a given BuildContext and when the dependencies of this widget change (e.g., an InheritedWidget referenced by this widget changes). 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 and from the given BuildContext.
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. A given widget might be built with multiple different BuildContext arguments over time if the widget is moved around the tree or if the widget is inserted into the tree in multiple places at once.
The implementation of this method must only depend on:
- the fields of the widget, which themselves must not change over time, and
- any ambient state obtained from the
contextusing BuildContext.dependOnInheritedWidgetOfExactType.
If a widget's build method is to depend on anything else, use a StatefulWidget instead.
See also:
- StatelessWidget, which contains the discussion on performance considerations.
Implementation
@override
Widget build(BuildContext context) {
debugText(' IMAGE', path);
// Clear the image cache
imageCache.clear();
imageCache.clearLiveImages();
return FutureBuilder<Uint8List?>(
future: _loadImageBytes(),
builder: (BuildContext context, AsyncSnapshot<Uint8List?> snapshot) {
var bytes = snapshot.data;
if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
} else if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
} else if (bytes == null || bytes.isEmpty) {
return const Center(
child: Text(
'Image not available',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.redAccent,
),
),
);
} else {
return Container(
decoration: sunkenBoxDecoration,
width: double.infinity,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// 20240726 gjw Ensure the Save button is aligned at the top.
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 20240726 gjw Remove the Flexible for now. Perhaps avoid
// long text in the Image Page for now. Save button was
// not getting pushed all the way to the right after
// adding Flexible.
//
// 20240725 gjw Introduce the Flexible wrapper to avoid the markdown
// text overflowing to the elevarted Export
// button.
MarkdownBody(
data: wordWrap(title),
selectable: true,
onTapLink: (text, href, title) {
final Uri url = Uri.parse(href ?? '');
launchUrl(url);
},
),
const Spacer(),
MarkdownTooltip(
message: '''
**Enlarge.** Tap here to view the plot enlarged to the
maximimum size within the app.
''',
child: IconButton(
icon: const Icon(
Icons.zoom_out_map,
color: Colors.blue,
),
onPressed: () {
showImageDialog(context, bytes);
},
),
),
MarkdownTooltip(
message: '''
**Open.** Tap here to open the plot in a separate window
to the Rattle app itself. This allows you to retain a
view of the plot while you navigate through other plots
and analyses. If you choose the external app to be
**Inkscape**, for example, then you can edit the plot,
including the text, colours, etc. Note that Inkscape can
be a little slow to startup. The choice of app depends
on your operating system settings and can be overriden
in the Rattle **Settings**.
''',
child: IconButton(
icon: const Icon(
Icons.open_in_new,
color: Colors.blue,
),
onPressed: () async {
// Generate a unique file name for the new file in the
// temporary directory.
String fileName =
'plot_${Random().nextInt(10000)}.svg';
File tempFile = File('$tempDir/$fileName');
// Copy the original file to the temporary file.
File(path).copy(tempFile.path);
// Pop out a window to display the plot separate
// to the Rattle app.
// Update "Image Viewer" state.
final prefs = await SharedPreferences.getInstance();
final imageViewerApp =
prefs.getString('imageViewerApp');
Platform.isWindows
? Process.run(
imageViewerApp!,
[tempFile.path],
runInShell: true,
)
: Process.run(imageViewerApp!, [tempFile.path]);
},
),
),
MarkdownTooltip(
message: '''
**Save.** Tap here to save the plot in your preferred
format (**svg**, **pdf**, or **png**). You can directly
choose your desired format by replacing the default
*svg* filename extension with either *pdf* or *png*. The
file is saved to your local storage. Perfect for
including in reports or keeping for future
reference. The **svg** format is particularly convenient
as you can edit all details of the plot with an
application like **Inkscape**.
''',
child: IconButton(
icon: const Icon(
Icons.save,
color: Colors.blue,
),
onPressed: () async {
String fileName = path.split('/').last;
String? pathToSave = await selectFile(
defaultFileName: fileName,
allowedExtensions: ['svg', 'pdf', 'png'],
);
if (pathToSave != null) {
String extension =
pathToSave.split('.').last.toLowerCase();
if (extension == 'svg') {
await File(path).copy(pathToSave);
} else if (extension == 'pdf') {
await _exportToPdf(path, pathToSave);
} else if (extension == 'png') {
await _exportToPng(path, pathToSave);
} else {
// If the user selected an unsupported file
// extension show an error dialog.
showOk(
title: 'Error',
context: context,
content: //const Text(
'''
An unsupported filename extension was
provided: .$extension. Please try again
and select a filename with one of the
supported extensions: .svg, .pdf, or .png.
''',
);
}
}
},
),
),
const SizedBox(width: 5),
],
),
const SizedBox(height: 5),
LayoutBuilder(
builder: (context, constraints) {
// The max available width from LayoutBuilder.
final maxWidth = constraints.maxWidth;
// Apply a bounded height to avoid infinite height error.
final double maxHeight =
MediaQuery.of(context).size.height * 0.6;
return SizedBox(
height: maxHeight,
width: maxWidth,
child: InteractiveViewer(
maxScale: 5,
alignment: Alignment.topCenter,
child: path.toLowerCase().endsWith('.svg')
? SvgPicture.memory(
bytes,
fit: BoxFit.scaleDown,
)
: Image.memory(bytes),
),
);
},
),
],
),
),
);
}
},
);
}