Newbie coder @ 50

For the time being I will leave the NavigationRail in my project for a while, because a solution would be in the making. I'll keep you informed. But now we have to move on with the project. Themes The first part of my programming session today was implementing the NavigationRail IconThemes. I actually didn't have any problems with this code. I created my own themes in my Style.dart file and then implemented them. As described in the documentation. Very simple actually. Exactly the same as applying a TextTheme. Clean up Because I found it unclear when reading the code, I decided to clean up the code. Clean up and organize so that it is clear to anyone reading the code. And easy to understand. The first major part with the most work was clearing the MainApp. According to the conventions, this mainApp file should be as empty as possible and only ensure that the app starts. And that it starts from the right place. And of course tidy is always neat. Everything is now grouped in a ve

In between, a state of affairs regarding my emotions during my quest. The last programming sessions were tough. Full of problems and no solutions in sight. And then there are moments of loneliness. Loneliness because you do not immediately have someone in the area to discuss with. A discussion that you have with yourself because the people in your neighborhood do not understand what you stand for. And of course out of a certain pride you do not want to immediately inform social media about the problem. Especially because you doubt yourself for lack of knowledge. It is deep water that you have to pass through. In my case, I am now in a certain career, where stability reigns. An exemplary function even. If I want, I can perform the same job until my retirement. With complete job security and security of income and standing. And yet I am fighting for a new career, full of insecurities, problems and new things. It will certainly not be easier for me as an entrepreneur in a crowded market.

Research After researching myself and other fellow SEs, we have to conclude that there are still a lot of flaws in the NavigationRail widget (). NOT possible to make this rail dynamic In terms of Layout, this widget is completely 'hard coded'. So there are no possibilities to place the Icons in the NavigationRail () where you want. So it is also not possible to make this rail dynamic. There is therefore no possibility to adjust a mainAxisAlignment and also not the vertical space between the icons in the rail. So I am faced with the following options. I adapt the NavigationRail widget code myself to the needs I have for my layout and make it MyNavigationRail. So I build my own Classe. Or I build my own NavigationRail with the layout widgets that exist. (Row (), Column (), etc ....) The second choice also implements that my navigation code will be a different Route code. I have not yet decided which choice I am going to make. But I'll keep you posted. What can I give as advic

First major programming problem There has been a moment of silence on this blog and in my code sessions. But below you will be able to read why. I am on my first major programming problem. This problem is already taking up 4 coding sessions. Solution In my prototype, the icons in the navigation rail are further apart than the NavigationRail widget automatically places them. I searched the net and found an article by Ankit Chowdhury. It contains the following solution NavigationRailDestination (   icon: Padding (       padding: const EdgeInsets.symmetric (vertical: 24),       child: Icon (Icons.av_timer)),   label: SizedBox.shrink (), ), I can't use this Unfortunately, I can't use this solution to place the icons further vertically. The reason for this is that I need the minimum width of the Navigationral in my design. But part of the solution is to set 'labelType' to 'All'. Once this setting is used, the Navigationrail's minimum width becomes 74px instead of

From last session to edit. Most I have found myself making the app heavier than necessary, I guess? I have used Padding widgets around the Text widgets. I better use a Container widget, it also has a padding constructor. Or does this actually make no difference, i wonder? How can I find out about this. I've looked in the DevTool for that. But I got the answer from Max Weber of Flutter Explaned. Basically it comes down to the same thing, but the container widget offers more possibilities. So I replace all the Padding () with Container (). My custom font from the prototype. In this session today the implementation of a FontFamily. I want the font from the prototype. That's 'Oxygen' in the design. What do I have to look out for that is fontweight and fontsize. I can easily deduce this from the inspector in Figma. I went to Googlefonts.com to download this font family and copy & paste it into a new assets folder fonts. We have to import the Font family and describe it i

In this code session I broadly built the landing page. Everything still with the standard themes and fonts. I also exported the necessary image from Figma to the assetsmap in my flutter project. The great thing about Figma is that you can use the images where you have put time to adjust them in the prototype, straight from the box in Flutter. With the adjustments you made in Figma design. As you can see from the two images we are not there yet, but the basic widget tree has been built. Only the following properties must be introduced from the prototype. Distances, colors, font, etc. The second major part of this session I have devoted to centralizing all constant data. Such that the complete app can be adapted to the wishes of the customer in 1 dart file. As they say it so beautifully in Flutter. A dedicated constants library, or did I say this just now hahaha. The next post will be about adapting or overriding the thema to my prototype specs. Do, believe and be happy, Stefaan Code 1

In this session I have created all the main screens of my app that I will need. In my case, those are 5 main screens that can be reached from the navigation page. I have created these screens because I need them to test the navigation rail routing. For now I just colored all screens. Offcourse I had to imort all the screens, to be able to call them. In the Classe HomeScreenState I have made a list of the different main screens. This list is then linked to the selected index of the Navigation Rail. And so I can call up and display the screens to the right of the Rail. This was compleet new to me. I would love to hear in the comments whether this is the correct way of routing or whether it can be done in a better way. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class HomeScreen extends StatefulWidget { HomeScreen({Key key}) : super (key: key); @ override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen>

Starting is always difficult because I am out of my think rhythm. Those older brains need to heat up for a while. A glass of wine sometimes helps ;-) Icons Today I want to bring the icons, which I used in my Figma prototype (which you can find here ), into my project. You can find what I programmed last time here . Since I actually had no idea how to get started, I started searching on Youtube. And there I got a very clear explanation via the channel of Reso Coder. The link to the corresponding video can be found at the bottom in the thank you section. I can therefore export my icons from Figma as SVG. Then I can have them mapped via the website Fluttericons.com for use in Flutter. A wonderful tool, especially for large libraries of icons. But it did'nt work for my icons that i exported out of Figma.  I have no idea why. For the moment i used standard material icons. Background image I exported the background of my prototype(Figma) to my project.  I got my background in as a png. F

Today I start programming my app. The language is Dart and the Framework is Flutter. Based on my design, I first looked up which widgets are interesting for my app. You can find my design here . If you want to help, there 's a comment section in this post. Thank you in advance.  The thoughts The Scaffold widget is the backbone of my screen. And we are going to build on that. Now I immediately ask myself whether I should place my background design in the scaffold or later in a screen. Now according to the documentation, the Scaffold has no decoration option, so later I will have to use a widget that does have a decoration option. The next widget from which I looked up the documents is the "Navigation Rail". From the documentation I have taken the following important things. The Navigation Rail is the first part of a Row () so it is on the left side. And this Row is high in the widget tree. And this is again in a Scaffold () body. And if I want to keep the rail as narrow as