UI design

Text layout

The Flutter Text widgets are not sufficient for the text layout requirements of a Bible app.

The superscript verse numbers and footnote letters could be done with a transform, but there is no apparent solution for the paragraph spacing and indentation with appropriate line-wrapping.

Another requirement will be highlighting/selecting without including non-scripture header titles.

One potential solution is to develop a custom text painting widget:

• It will take in a list of USFM markers and text, which it will use to format and layout the text in the given size constraints.
• This will require making each word a Paragraph object and then measuring and laying out each line.
• The widget should also handle gestures for tap, double tap, pinch to zoom, returning the tapped verse, etc.
• It should allow highlighting and return the location and verses of the highlight needed for building a context menu.

Tabbed navigation

The open verses will display like browser tabs across the app bar.

• The open tab will be highlighted and have an x to close it.
• The tabs can also be dragged to reorder.
• A new tab will show the book/chapter selector.
• When a chapter has been selected, the tab will show the text for that chapter.
• Single tapping the text will hide the app bar and enter full screen mode.