Rich Calculator Design For Beginners

Опубликовано: 01 Январь 1970
на канале: FlutterShipp

344

Source Code: https://github.com/irajeshh/FlutterShip
Chapters:
0:00 Setting Up A Scaffold
0:10 Display Space Widget
0:43 Tools Row Widget
2:29 Right Column Widget
3:32 Inner Grid Widget
6:23 Bottom Row Widget
8:25 Column Builder
9:31 Row Building
9:50 Minor padding adjustments

A simple minimalistic calculator design cloned from dribbble.
This video is primarily focused on the UI, not on the functionality.
Also suitable for beginners only.
You can find the source code of the design form the github repository.
The calculator is basically contains 3 widgets in a column.
∟One is expanded display child.
∟Second one is a row with mathematical symbols.
∟Third child is a row with two children.
∟First child is a column builder.
∟Second child is a simple column with mathematical functions.

The Column builder simply builds three rows.
Each Row contains three number buttons.

Note: I here first tried Gridview builder, but it failed to reproduce the User interface. So due to lack of time I just used columns and rows.

Queries related to this video:
flutter user interface design tutorial for beginners,
flutter user interface basics for beginners,
flutter user interface best practices,
flutter user interface design speed code,
flutter calculator app design for beginners
flutter calculator app tutorial for beginners
flutter calculator app design step by step
flutter calculator user interface clone
flutter calculator in speed code
flutter calculator without logic,
flutter calculator tutorial with source code,
simple calculator app using flutter framework
beautiful calculator app flutter learners
dribbble calculator flutter,
lovely calculator flutter,
flutter calculator project with source code on github,
flutter simple calculator user interface designed from dribbble shots,
minimalistic scientific calculator flutter user interface design,
designing a rich calculator user interface using flutter framework,
calculator app user interface made with flutter

Music Credits: • Video
Design Credits:
Video: • Daily UI Design Challenge | Day - 04 | Cal...
Dribbble: https://dribbble.com/shots/15965346-D...

Softwares:
ScreenCopy: https://github.com/Genymobile/scrcpy
DeskPin: https://efotinis.neocities.org/deskpi...
PauseMe: https://github.com/peterbitfly/pause....
Browser: https://brave.com/download/
VsCode: https://code.visualstudio.com/
Video Editor: https://filmora.wondershare.com/

Websites:
Material Icons: https://fonts.google.com/icons

Devices:
Laptop: https://amzn.to/3dCBz8q
RAM: https://amzn.to/3yiZGkp
SSD: https://amzn.to/3hcmooE
Monitor: https://amzn.to/3yhdDiS
Mobile: https://amzn.to/2SJhfLo
Mobile 2: Vivo y11
Microphone: https://amzn.to/3x7bYLD
USB Mic Adaptor: https://amzn.to/3iPjnKO

Hashtags: #flutter #flutterShip #android #ios