Building a Flutter Calculator: Part 1, The Layout

I got to the point where I need to write the main calculator for my app I postponed it for a long time I built everything around it but this this part this part is still missing now what are the requirements for this calculator it will be used by millions so it needs to be fast it needs to be reliable and it needs to look like every calculator out there what do I mean by that is it a bad thing no it's a good thing the user should feel at home with a calculator it's a tool it's not something fancy so the layout the buttons needs to be in a specific position second it needs to cover all screen sizes from small phone to large screens even desktops I needs to make sure that every screen size in between is covered it needs to support different instances of the calculator in the same app what do I mean by that well in the old app I had the calculator on the side and in each converter for example I could open a dialogue with a separate a different calculator so no hard coding over there no single tones nothing I need to have multiple instances in the same app so uh I need to deal with it of course it needs to have history memory buttons and it needs to have light and dark themes but that's already covered by the app now the calculator layout part it's done it's finished well most of it but uh there's a little disclaimer I want to make first this is not a tutorial I wouldn't dare call it a tutorial because uh well I'm pretty fresh in my flatter journey and although I will show you a lot of code take it with a grain of salt this is more like me sharing my journey through the app development process than anything else and if you're more experienced than me well feel free to give your input your feedback is really really appreciated that out of the way I want to go over each calculator component and show you what it does first the calculator widget it sits at the base of every calculator layout and itself it's an inherited widget why is that as I said before I need to have multiple calculator instances basically I need to have a provider which is this calculator provider autod dispose Notifier provider at the base of every calculator and I I really shouldn't hardcode it into the widget so I'm using a in herited widget to provide this provider provider provider to the calculator widget tree this way I can use the Notifier and watch methods everywhere in the widget tree to access the provider I know I said it's an inherited widget but what's with this space layout over here well this is just an abstraction over the inherited widget and this provides a size the one thing that's different here is that this size provides more more than just the width and the height it provides all the calculator size thresholds what do I mean by that as you can see over here it knows when the calculator is small normal medium and large based on the calculator shorter side and it knows when the calculator is tall normal short Square narrow landscape and wide using this size I can in the calculator Builder method pick the appropriate calculator widget based on the screen size and the screen ratio it's a pretty big method but uh in total I have around 28 different calculator layouts I can show you over here this one is the tall layout this one is the portrait layout this one is uh the short layout this one is the square layout narrow landscape and in the end wide I really hope I've been clear enough now let's go over the calculator here and see what are the base calculator layout components the widgets that make up the calculator over here is the basic one the calculator button it can have different styles for different input groups like The Operators over here the memory buttons over here or the digits over here it can show icons or more information depending on the context next we have the button Grid or the panel this handles the button layout and the Staggering of the elements as you can see this button staggers on two columns this button staggers on two rows over here we have a pager and here we have a calculator display let's see what each and everyone does now before talking about the calculator button I need to show you a hidden widget a helper widget I had to write I'm talking about the calculator Builder this works more like a layout builder in flutter it provides through a builder method all the constraints and the configuration of the calculator what do I mean by that well it provides a key a string key we'll get into that later a calculator configuration over here which has a mode which is the calculator mode over here degrees and radians a separator this one can be different based on the user's local it can be a DOT or it can be a comma and an is paged Boolean what does this do well if the calculator is paged I need to be able to know about it and show a button to close the pager if the calculator is not paged the button is gone this is why I provided a calculator configuration over here it also provides the calculator size because the calculator size it's not always the window size it can be smaller it provides a padding over here the padding can be different on the large screen sizes there is no left padding on phones there is a top and bottom padding based on the status bar and navigation bar also it's provides a spacing for the calculator buttons how do I use this uh calculator Builder well let's go over the portrait layout over here as I said it's just like a layout Builder it exposes a method and I can use the key the configuration size padding and spacing when I make my layout now back to the calculator button before talking about it I want to show you two inms I'm talking about the calculator input data and the input style the input style is pretty self-explanatory it provides a style for every calculator button digit operator Advanced special equals and clear the input data inom is more complicated it provides a value for each input a user can make on the calculator this can be a value for the digits a value for the separators a value for the operators for the advanced operators for the trigonometry functions the memory the bracket and so on it can also provide a display value this will be displayed to the user and this will be handled internally throughout the calculator inside the logic and everywhere else now the button here's what it does it takes a style an input data a secondary data a show secondary data and an ontap function the style is used in these three methods based on each input style we can get a different text color a different Ripple color and a different background color why did I provide it with two input datas well one button can have two calculator inputs one on press and one on long press in the build function we have a layout Builder a material widget an ink well and the ontap ontap down onong press functionality which will handle the haptic feedback and will notify the calculator provider through the calculator Notifier method over here calculator Notifier handle input in the build container method we're building the container for the calculator input over here which can be an icon or a text field in this case an autosized text which will take the size of I think half the calculator buttons height or width whichever is the smallest moving over to the calculator panel this is just the simple staggered grid view this is the library over here I'm using the staggered grid View this one I only renamed it to have all the widgets in my calculator widget ramed as calculator so I have a calculator panel and a calculator tile going back to the calculator button over here this is where the s tile static methods comes handy because this is just a wrapper over the calculator button to be able to wrap it into a tile and provide some staggering functionality that's all this panel and tile allows me to do things like like having the equal button stagger between uh two rows and the zero button over here stagger between two colums pretty straightforward but I don't think you can do that with basic grids in flutter moving up to the pager also Library just because I need to have the pager take the content the pages height the basic flut pager doesn't do that apparently this one handles the paging of uh two calculator panels what's interesting here is that I provide it with a key it is a global string key and what this does let's go over the portrait layout over here you can see I have the pager here with a key and uh in this button which is the input data back button I can do calculator pager of key and call this previous page method in the calculator pager state so over here I can simply go between the pages using a simple Global string key doing this calculator pager off key I can go through the widget tree fetch the current state and column method on the current state I chose this approach so that I wouldn't need to have a provider for this simple functionality yeah the last widget we're going to go over here in this video is the calculator display I have two major textt fields in this display the formula text field and the result text field the display itself it's a consumer stateful widget why is it a consumer because it listens to the formula and result strings in the calculator provider over here and updates the formula and result text controllers in its state why am I keeping the text controllers in the state well I found it cleaner to keep the text controllers here and dispose them accordingly then keep them in the provider I think it's a best practice to do so also I need to have a listener on the formula text controller in the in state because in the browser I need to be able to do custom input with the keyboard and not rely entirely on the calculator buttons which don't work by now because the logic over here it's not done it's not done yet I'm working on it now what does the build method do every time the calculator data changes from the calculator provider it updates the formula and result text controllers it lays out everything in a material widget with Corners with a background color and it provides a column with two calculator Fields a formula field and a result field you can see them here and here what does this calculator field do do right over here I have 2 + 2 the text size is large but if I add characters to this string the text size shrinks to a lower threshold so if I do this indefinitely it would not shrink anymore this will go on even if the calculator is like this big it will also work you can see it works how am I doing this well in the build method I have a layout Builder to measure everything I have a text field and in this text field I have a calculate font size method what does this method do well it takes the size of the text field the width of the text and it just calculates an appropriate size don't ask me how I did this here is the code all the code it's three lines of code but I think I worked one day or several hours over this it works I don't know how anymore but uh it works now that I showed you all the calculator components all the calculator widgets I'm going to go over the layout itself over here you can see I have large medium normal and small widgets for the moment only the normal size is finished why is that because by doing the calculator logic unfortunately there's going to be some uh refracturing with it so as it is now I have a base functionality and MVP that will help me do the calculator logic but not have so much work to do if I have to refactor something and I need to go go to 28 calculator layouts enough talk let's go through the layouts you can see here normal layout I have landscape and portrait we're going to go to the portrait layout first it's a simple stateless widget it has a calculator Builder with the key configuration size padding and spacing over here it puts everything in the column and starts with a calculator display I'm using the I think awesome flatter extension library and it's flexible the display it's flexible then it has a pager which is this pager over here with two calculator panels each with their buttons a button looks like this let's see the percentage over here it has a main AIS pan and a cross AIS pan a style and the input data itself pretty straightforward some buttons like sign and arc sign over here have secondary data as you can see some buttons like the backspace button have the input data that it's backspace a secondary input data a long press one which is clear and the show secondary data Falls so right here I can long press to clear everything basically using all clear but not show the all clear below the backspace icon for each width and height ratio I have different layouts you can see the short layout over here the tall layout over here the landscape layout over here the narrow layout over here for each ratio I have different layouts this was all there was to say about this calculator layout the next video in this series is going to be about the calculator logic basically the calculator Notifier over here at First Look it looks easy but if you really break down the Google calculator and other calculators on the store you'll see it's pretty pretty complex the logic behind it it gets pretty complicated it will take me a while so in the meanwhile if you want me to talk about something else let me know in the comments below may it be I don't know monetization or promoting your app whichever subject you you seem interested in it feels so nice to have a place and to be able to share this information with you guys and to find developers like me so feel free to ask me anything I'll make sure to answer each and every one of you and until the next one I was Andre thank you for watching

Channel: Andrei Lupsa

Views: 1,084

Keywords: all-in-one calculator, application, development, android, ios, flutter, calculator

Id: QmhZKtNDOtI

Length: 16min 1sec (961 seconds)

Published: Sat Apr 20 2024