Flutter Input Output Preview
First we need a two pane widget to properly render on mobile and desktop:
import 'package:flutter/material.dart';
class TwoPane extends StatefulWidget {
const TwoPane({
super.key,
required this.primary,
required this.secondary,
required this.title,
this.actions = const [],
this.loading = false,
});
final (String, WidgetBuilder) primary, secondary;
final List<Widget> actions;
final String title;
final bool loading;
@override
State<TwoPane> createState() => _TwoPaneState();
}
class _TwoPaneState extends State<TwoPane> {
bool darkMode = false;
void toggleDarkMode() {
if (mounted) {
setState(() {
darkMode = !darkMode;
});
}
}
ThemeData theme(Color color, Brightness brightness) {
return ThemeData(
brightness: brightness,
colorScheme: ColorScheme.fromSeed(
seedColor: color,
brightness: brightness,
),
useMaterial3: true,
);
}
@override
void didUpdateWidget(covariant TwoPane oldWidget) {
if (oldWidget.loading != widget.loading ||
oldWidget.title != widget.title ||
oldWidget.actions != widget.actions) {
if (mounted) setState(() {});
}
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
return Theme(
data: theme(Colors.purple, darkMode ? Brightness.dark : Brightness.light),
child: Builder(builder: (context) {
final (primaryTitle, primaryBuilder) = widget.primary;
final (secondaryTitle, secondaryBuilder) = widget.secondary;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: false,
actions: [
IconButton(
tooltip: 'Toggle dark mode',
onPressed: toggleDarkMode,
icon: Icon(darkMode ? Icons.light_mode : Icons.dark_mode),
),
...widget.actions,
],
),
body: LayoutBuilder(
builder: (context, dimens) {
if (dimens.maxWidth > 800 && dimens.maxHeight > 600) {
return Column(
children: [
if (widget.loading) const LinearProgressIndicator(),
Expanded(
child: Row(
children: [
Flexible(
flex: 1,
child: primaryBuilder(context),
),
Flexible(
flex: 1,
child: secondaryBuilder(context),
),
],
),
),
],
);
}
return DefaultTabController(
length: 2,
child: Column(
children: [
SizedBox(
height: kToolbarHeight,
width: double.infinity,
child: TabBar(
tabs: [
Tab(text: primaryTitle),
Tab(text: secondaryTitle),
],
),
),
if (widget.loading) const LinearProgressIndicator(),
Expanded(
child: TabBarView(
children: [
primaryBuilder(context),
secondaryBuilder(context),
],
),
),
],
),
);
},
));
}),
);
}
}Then we can pass some text fields for one pane to render an output:
import 'package:flutter/material.dart';
import 'two_pane.dart';
class InputOutputPreview extends StatefulWidget {
const InputOutputPreview({
super.key,
required this.title,
required this.input,
required this.output,
required this.preview,
required this.placeholder,
this.actions = const [],
this.codeTitle = 'Code',
this.previewTitle = 'Preview',
this.loading = false,
this.lazy = false,
this.previewSize = const Size(300, 700),
});
final (
String,
ValueChanged<(TextEditingController, TextEditingController)>
) input, output;
final Widget? preview;
final Widget placeholder;
final String title;
final List<Widget> actions;
final String codeTitle, previewTitle;
final Size? previewSize;
final bool loading;
final bool lazy;
@override
State<InputOutputPreview> createState() => _InputOutputPreviewState();
}
class _InputOutputPreviewState extends State<InputOutputPreview> {
final input = TextEditingController();
final output = TextEditingController();
String? lastInput;
String? lastOutput;
@override
void initState() {
super.initState();
if (!widget.lazy) input.addListener(onInput);
output.addListener(onOutput);
}
@override
void dispose() {
super.dispose();
if (!widget.lazy) input.removeListener(onInput);
output.removeListener(onOutput);
input.dispose();
output.dispose();
}
void onInput() {
final (_, update) = widget.input;
final str = input.text;
if (lastInput == str) return;
update((input, output));
lastInput = str;
}
void onOutput() {
final (_, update) = widget.output;
final str = output.text;
if (lastOutput == str) return;
update((output, input));
lastOutput = str;
}
@override
Widget build(BuildContext context) {
final (inputTitle, _) = widget.input;
final (outputTitle, _) = widget.output;
return TwoPane(
title: widget.title,
actions: widget.actions,
loading: widget.loading,
primary: (
widget.codeTitle,
(context) => SizedBox(
height: double.infinity,
child: Column(
children: [
Flexible(
child: Padding(
padding: const EdgeInsets.all(8),
child: Card(
child: ListTile(
title: Text(inputTitle),
subtitle: TextField(
maxLines: null,
controller: input,
expands: true,
decoration: InputDecoration(
isCollapsed: true,
border: InputBorder.none,
suffix: widget.lazy
? IconButton(
onPressed: onInput,
icon: const Icon(Icons.save),
tooltip: 'Submit',
)
: null,
),
),
),
),
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.all(8),
child: Card(
child: ListTile(
title: Text(outputTitle),
subtitle: TextField(
maxLines: null,
controller: output,
expands: true,
decoration: const InputDecoration(
isCollapsed: true,
border: InputBorder.none,
),
),
),
),
),
),
],
),
),
),
secondary: (
widget.previewTitle,
(context) => Container(
color: Theme.of(context).colorScheme.surfaceVariant,
child: Builder(builder: (context) {
if (widget.previewSize == null) {
return widget.preview ?? widget.placeholder;
}
return Center(
child: Material(
elevation: 8,
child: SizedBox.fromSize(
size: widget.previewSize,
child: widget.preview ?? widget.placeholder,
),
),
);
}),
)
),
);
}
}