How do you build a new screen?

Help UI/UX Design
1

Scenario: You’ve been tasked with creating a completely brand new screen for an existing app. The designs have been created in Figma and the team lead has given you the task of building the screen. The state management side is ready so it’s only the widgets to create the screen which needs to be done.

What approach do you take for building this new screen?

Here are the approaches I’ve seen before in the past:

1. Integrate it inside the existing app

  • Setup the real routing
  • Make sure the button click loads the new screen
  • Load up the app and navigate through it until you reach the new screen
  • Start working on the widgets for the new screen and have the data hard coded
  • Hot reload from time to time to see your changes and to make sure it’s close to what you need to build
  • Connect with state management and make sure it’s displaying the correct information
  • Make sure the new screen is working as expected

2. Implement it first in a sandbox project

  • Setup a separate project
  • Start working on the widgets for the new screen and have the data hard coded
  • Hot reload from time to time to see your changes and to make sure it’s close to what you need to build
  • Once the UI is done move the newly created code to the real project
  • Connect it with the existing router
  • Make sure the button click loads the new screen
  • Connect with state management and make sure it’s displaying the correct information
  • Make sure the new screen is working as expected

3. Separate entry point inside existing app

  • Have a separate file to load the new screen you are working on
  • Start working on the widgets for the new screen and have the data hard coded
  • Hot reload from time to time to see your changes and to make sure it’s close to what you need to build
  • Once the UI is done connect with existing router
  • Make sure the button click loads the new screen
  • Connect with state management and make sure it’s displaying the correct information
  • Make sure the new screen is working as expected
2

Are you familiar with WidgetBook? Many projects are using that successfully to separate the widget-building from the wiring once installed.

3

If the app isn’t too big I tend to do 1. Because I like widgets that know where to pull their data from instead of passing everything in.

If the app is bigger I will use a variation of 3.

I will basically just add a button to the first page that is displayed after the app is completely initialized and late that button push the new page without using any complex routing.
That way the page has access to the real data model and still I don’t have to navigate a lot on every hot restart.

4

If its a new route make this new page be the default route. and just do 1

With hot reload you really don’t need to rebuild that much anyway, and once that’s done just make the routing change and you’re done

If it’s something like a particular state or something that’s not quite a route but is still full screen, just shove it into run app directly or as the body of the scaffold, or somewhere high enough that it still gets the things it cares about (DI classes mostly) and nothing more

1 Like