Write your first Flutter app on the web

[SimonLab]

I've just finished the following tutorial: https://flutter.dev/docs/get-started/codelab-web

The tutorial doesn't explained in details how Flutter application are build. It gives however a first idea of the general structure of the app:

• Widget are immutable
• Widget can be statefull or stateless
• When a widget is statefull, the state is stored in an associated private class (private class start with an underscore)
• The Navigator widget manage which scree/page/route should be display. This is done by changing (adding, removing using setState function) element to a stack of widget. The widget on the top of the stack is the one which is displayed
• callback functions are used to define the behaviour of the application. For example onPressed event call the function...

As expected the application works on Chrome and on Android and uses the same code. I think the difficulty will be know how to search the flutter API and build from it the intended UI. The API is doing a lot for you as it contains a lot of predefine UX.

I'm going to continue with other smaller tutorial to get more experience and understanding how Flutter works before continuing with #15

Looking at: Write your first Flutter app, part 1

[SimonLab]

I've continued to work on the tutorial and finish today the second "write your first Flutter app" application: https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#8

I've adapted the example to display the list of quotes from https://github.com/dwyl/quotes. I had to research how to do a get http request, how to convert a json to Dart objects and how to display the element:

Some concepts I had to research and get a basic understanding to be able to run the applicaiton:

• use Future for asynchronous events: https://dart.dev/codelabs/async-await
• use http package: https://pub.dev/packages/http
• understanding what is a Factory constructor: https://dart.dev/guides/language/language-tour#constructors
• using the ListView widget to display the quotes

I'll continue to work on the examples to get used to the structure of the Flutter apps.

[SimonLab]

I continue to work on examples and tutorial. I'll try to follow the section from the Flutter documentation page:

I'm now following the tutorial section and especially the "building layouts" page: https://flutter.dev/docs/development/ui/layout/tutorial

[SimonLab]

Layout exercise done:

• Widgets are classes which are used for UI but also for layout
• We can create complex UI by composing Widgets
• The layout widgets can have the child property or the children property depending on how many sub widgets are allowed to be contained
• The Container widget can be used to customise the child widget (padding, border, background colour...)

[SimonLab]

Currently reading at state management: https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro

[nelsonic]

@SimonLab did you push the code for these experiments to GitHub? (I don't see any Dart/Flutter projects on your personal repos and can't find it on /dwyl ...)

[SimonLab]

I don't think I've pushed the code to Github. I've created a few throwaway while testing the installation and main features of Flutter but the code is on my machine at the moment (I'll need to check if they are still running). Otherwise I've been opening some issues on learn-dart while testing the flutter code.

[nelsonic]

Simon, there's no such thing as "throwaway" code anymore than there are "throwaway" bank notes! Time is our most valuable and scarcest "resource" (more so than cash!) if we invest time in learning something it must be shared with the team (not just screenshots). We definitely need to push all Spike/Test code to GitHub especially if it's incomplete or not "perfect". If we spend days of "work time" learning something and there's no outcome (i.e. Code) then it's basically wasted effort. Please track down your code and see if it still runs. even if it doesn't compile, still push it up to GitHub so that others can refer to it as a starting point. please. 🙏

[nelsonic]

@SimonLab any luck tracking down the code on your computer? 💭

[SimonLab]

I have a few projects:

I'll check that I can still run them on my localhost and I'll push the code to Github