Editors: Do not use BottomAppBar in the scaffold property

The BottomAppBar when given in the Scaffold gets hidden when the
keyboard is visible. We had hacked around that by translating its
position, however that resulted in the cursor at the bottom being hidden
when we were typing a long note.

It is not just part of the body of the scaffold.

Also converted many functions into widgets.
This commit is contained in:
Vishesh Handa
2020-05-06 15:14:41 +02:00
parent 81eb605e98
commit 62b5761ec4
5 changed files with 190 additions and 132 deletions

View File

@ -152,18 +152,17 @@ class ChecklistEditorState extends State<ChecklistEditor>
child: NoteTitleEditor(_titleTextController, _noteTextChanged),
);
return Scaffold(
appBar: buildEditorAppBar(widget, this, noteModified: _noteModified),
return EditorScaffold(
editor: widget,
editorState: this,
noteModified: _noteModified,
parentFolder: widget.note.parent,
body: Column(
children: <Widget>[
if (widget.note.canHaveMetadata) titleEditor,
Expanded(child: FocusScope(child: checklistWidget)),
],
),
bottomNavigationBar: Builder(
builder: (context) =>
buildEditorBottonBar(context, widget, this, widget.note.parent),
),
);
}

View File

@ -26,12 +26,26 @@ abstract class EditorState {
enum DropDownChoices { Rename, DiscardChanges, Share }
AppBar buildEditorAppBar(
Editor editor,
EditorState editorState, {
@required bool noteModified,
List<IconButton> extraButtons,
}) {
class EditorAppBar extends StatelessWidget implements PreferredSizeWidget {
final Editor editor;
final EditorState editorState;
final bool noteModified;
final IconButton extraButton;
EditorAppBar({
Key key,
@required this.editor,
@required this.editorState,
@required this.noteModified,
this.extraButton,
}) : preferredSize = Size.fromHeight(kToolbarHeight),
super(key: key);
@override
final Size preferredSize;
@override
Widget build(BuildContext context) {
return AppBar(
leading: IconButton(
key: const ValueKey("NewEntry"),
@ -41,7 +55,7 @@ AppBar buildEditorAppBar(
},
),
actions: <Widget>[
...?extraButtons,
if (extraButton != null) extraButton,
IconButton(
key: const ValueKey("EditorSelector"),
icon: const Icon(Icons.library_books),
@ -94,28 +108,30 @@ AppBar buildEditorAppBar(
),
],
);
}
}
Widget buildEditorBottonBar(
BuildContext context,
Editor editor,
EditorState editorState,
NotesFolderFS parentFolder,
) {
class EditorBottomBar extends StatelessWidget {
final Editor editor;
final EditorState editorState;
final NotesFolderFS parentFolder;
final bool allowEdits;
EditorBottomBar({
@required this.editor,
@required this.editorState,
@required this.parentFolder,
@required this.allowEdits,
});
@override
Widget build(BuildContext context) {
var folderName = parentFolder.pathSpec();
if (folderName.isEmpty) {
folderName = "Root Folder";
}
var s = Scaffold.of(context);
print("s $s");
return StickyBottomAppBar(
child: BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
IconButton(
var addIcon = IconButton(
icon: Icon(Icons.add),
onPressed: () {
showModalBottomSheet(
@ -124,6 +140,20 @@ Widget buildEditorBottonBar(
elevation: 0,
);
},
);
return BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
Visibility(
child: addIcon,
visible: allowEdits,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
maintainInteractivity: false,
),
Expanded(
child: FlatButton.icon(
@ -135,26 +165,18 @@ Widget buildEditorBottonBar(
},
),
),
const SizedBox(
height: 32.0,
width: 32.0,
// Just so there is equal padding on the right side
Visibility(
child: addIcon,
visible: false,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
maintainInteractivity: false,
),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
);
}
class StickyBottomAppBar extends StatelessWidget {
final BottomAppBar child;
StickyBottomAppBar({@required this.child});
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
child: child,
);
}
}
@ -208,3 +230,46 @@ Widget _buildAddBottomSheet(
),
);
}
class EditorScaffold extends StatelessWidget {
final Editor editor;
final EditorState editorState;
final bool noteModified;
final IconButton extraButton;
final Widget body;
final NotesFolderFS parentFolder;
final bool allowEdits;
EditorScaffold({
@required this.editor,
@required this.editorState,
@required this.noteModified,
@required this.body,
@required this.parentFolder,
this.extraButton,
this.allowEdits = true,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: EditorAppBar(
editor: editor,
editorState: editorState,
noteModified: noteModified,
extraButton: extraButton,
),
body: Column(
children: <Widget>[
Expanded(child: body),
EditorBottomBar(
editor: editor,
editorState: editorState,
parentFolder: parentFolder,
allowEdits: allowEdits,
),
],
),
);
}
}

View File

@ -80,13 +80,12 @@ class JournalEditorState extends State<JournalEditor> implements EditorState {
),
);
return Scaffold(
appBar: buildEditorAppBar(widget, this, noteModified: _noteModified),
return EditorScaffold(
editor: widget,
editorState: this,
noteModified: _noteModified,
parentFolder: note.parent,
body: editor,
bottomNavigationBar: Builder(
builder: (context) =>
buildEditorBottonBar(context, widget, this, note.parent),
),
);
}

View File

@ -106,18 +106,14 @@ class MarkdownEditorState extends State<MarkdownEditor> implements EditorState {
onPressed: _switchMode,
);
return Scaffold(
appBar: buildEditorAppBar(
widget,
this,
return EditorScaffold(
editor: widget,
editorState: this,
extraButton: extraButton,
noteModified: _noteModified,
extraButtons: [extraButton],
),
parentFolder: note.parent,
allowEdits: editingMode,
body: body,
bottomNavigationBar: Builder(
builder: (context) =>
buildEditorBottonBar(context, widget, this, note.parent),
),
);
}

View File

@ -77,13 +77,12 @@ class RawEditorState extends State<RawEditor> implements EditorState {
),
);
return Scaffold(
appBar: buildEditorAppBar(widget, this, noteModified: _noteModified),
return EditorScaffold(
editor: widget,
editorState: this,
noteModified: _noteModified,
parentFolder: note.parent,
body: editor,
bottomNavigationBar: Builder(
builder: (context) =>
buildEditorBottonBar(context, widget, this, note.parent),
),
);
}