Qt Calculator GUI Tutorial Part 1

We have a new name now, Programming Liftoff!
Learn how to design a user interface for a calculator using Qt's drag-and-drop GUI designer. This is part one in a series on creating a calculator using Qt. From here you can either use Qt/C++ or PyQt to code the logic and interaction with the calculator.
The PyQt Part 2 video is here - • PyQt5 Calculator Gui T...
The Qt/C++ Part 2 video is here - • QT CPP Calculator Gui ...
Thanks for watching and comment with any questions! :)
-- Stylesheet code for buttons
/* Digits 0-9 Stylesheet */
QPushButton {
border: 1px solid gray;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* End Digits 0-9 Stylesheet */
/* (Clear,+/-,%,. buttons) Unary Operations Buttons Stylesheet */
QPushButton {
background-color: rgb(215, 215, 215);
border: 1px solid gray;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #BEBEBE, stop: 1 #D7D7D7);
}
/* End Unary Operations Buttons Stylesheet */
/* (Orange buttons) Operations Buttons Stylesheet */
QPushButton {
background-color: rgb(255, 151, 57);
color: white;
border: 1px solid gray;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #FF7832, stop: 1 #FF9739);
}
/* (Label at top) Label Stylesheet */
QLabel {
qproperty-alignment: 'AlignVCenter | AlignRight';
border: 1px solid gray;
}
background-color : white;
/* End Label Stylesheet */

[@ProgrammingLiftoff]

Want to increase your dev skills? Checkout Next Tech where you can program online. Get started today with a free account: c.next.tech/2WwKayS.

[@xthomas7621]

Thank you for the tutorial, really easy to understand. I was surprised to see the cssstylesheets, I didn’t realize qt had that.

[@JorrickSleijster]

I think it's a shame I didn't see this earlier! Amazing work! Especially the split off of PyQt and C++ Qt half way through is very nice!

[@vnmsenior]

Just got Qt 5.9.1 and Tools complete installed I look forwards to following some of these tutorials. Looks like fun, hope you make plenty more of these Qt tutorials. Just getting started learning C++ and I am also using Visual Studio Community 2017 to learn C++ hope to see you use both for these video tutorials.

[@fw8976]

did u got qt for free ?

[@larryteslaspacexboringlawr739]

thank you for python gui pyqt video

[@boom5935]

I loved the sound of your mouse click

[@nehaagarwal6544]

The filter box through which you are changing sizes I cant see it. Please help!!!

[@naceurmig]

good jobs

[@abhaysinghsengar9244]

Hi, Can you please tell me how can I set dynamic resizing to the widgets and buttons so when we resize the window the buttons also increase in size.

[@ProgrammingLiftoff]

That would be a great feature! Unfortunately I don't know how to accomplish that. If someone else knows, feel free to comment!

[@ahmad.software]

The shapes Won't change if the user changed the size of the app, is it possible to make dynamic with the changed size? If not, is it possible to make the user unable to change the app size

[@mastakouris]

When I try to get a kit it says "No suitable kits found" and it seems like i dont have a C++ compiler. I tried all of the solutions you gave on other comments and most of the compilers I could find online but nothing works.

[@shahidkhan0219]

Hi i would like know how to add buttons like we do in html. Or more clearly i don't want add button to window using drag and drop

[@ProgrammingLiftoff]

Great Question! This page from the QT docs should answer your question: wiki.qt.io/How_to_Use_QPushButton. I prefer to use drag and drop since its quicker, but there are definitely times where you may want to create the buttons and other items programmatically.

[@littleturtle4974]

Qt Creator says 'No valid kits' in the kit section of new project. Please Help?

[@ProgrammingLiftoff]

Try Agrim Pathak's answer to this stack overflow question: stackoverflow.com/questions/26499404/qtcreator-no-valid-kits-found

[@platinums99]

Do you use the default install for QT to write this?

[@ProgrammingLiftoff]

Yes. I downloaded QT from their site here www.qt.io/. If you decide to use PyQt in the later videos, you need to install PyQt5 from their site here www.riverbankcomputing.com. It can be confusing installing some software/tools, but hopefully it goes smoothly for you :)

[@BonBonShrimp]

Shouldn't we be using a top level layout for the form so that things like window resizing work? - Noob

[@shryoder]

*I don't get it... Do you write the actual code for it in Qt as an independent programming language or do you integrate the actual code from an other language like C++ or Python, or something and then just make the UI in Qt?*

[@ProgrammingLiftoff]

Your latter statement is correct. You write your code in a programming language such as C++ or Python, and you import/include the Qt libraries and use them to make the UI. In this tutorial I create the whole program in the Qt Creator, which is an IDE designed specifically for Qt. You don't actually need to use Qt Creator to create the program, however I've found it's a bit easier when using it, especially if you want to use the drag and drop GUI creation tools that come with Qt (shown in this video).

[@shryoder]

@@ProgrammingLiftoff Cool, thx, mate...

[@atulanandjha5316]

which IDE you are using here?

[@ProgrammingLiftoff]

QT Creator. It is available here: www.qt.io/download-qt-for-application-development

[@quicksilver1752]

How do you get the black theme

[@ProgrammingLiftoff]

Open the preferences (on Mac click 'Qt Creator' in top left menu bar and then select preferences). Then choose the 'Environment' tab on the left, and then change the theme to 'Dark'.

[@quicksilver1752]

Thanks but one more really important question. When I create a new project I don't get all the other folders like Headers and Sources and Forms. Just the "FirstGui" folder. Really need help solving that because can't do anything without it. And I also subscribed. Really appreciated the quick feedback you gave me earlier.

[@ProgrammingLiftoff]

Thats strange, those folders should be generated for you. Did you try double clicking on the "FirstGui" folder to see if that showed the other folders?

[@quicksilver1752]

Programming Liftoff Yup. Within that folder, it just has the .pro file and that's it. Maybe I downloaded the wrong version or something. Mine says "Qt Creator Community". But then how would I download it properly because I just downloaded the default selected options.

[@ProgrammingLiftoff]

Alright, I uploaded the starter files to the Programming Liftoff GitHub Repository. You can download them here: github.com/programming-liftoff/Qt-Calculator-starter. Once downloaded, double click the .pro file and the project will open in Qt and you should be able to follow the tutorial from there. Let me know if you encounter any problems with this. As far as the question you had, that sounds like the correct version. I would double check that you created the project with all the same options shown in the video. You can add the needed files manually by clicking on 'File->New File or Project...' if you run into this issue again; however this issue should not be happening so you might need to spend some more time trying to figure out what's going on.

[@smaranil]

Hey bro i need some help can we talk on Facebook/'discord/Teamspeak or anything

[@cupitman1260]

I cannot see black words on the black background, man.

[@kevinbrian3060]

Bro can you provide Qt creator Google drive download link for Windows

[@alexp4448]

bro its free from their website

[@zakharkulbachenko3433]

У тебя хороший английский.

[@3arabiWalBanate]

No need to create styles sheets now there is this WebSite for free downloads Qss Stock Templates Qt

[@Rubenjr005]

Ok I finally figured out how to get QT Designer to work but for Some Projects, Debug, Play tabs on the left of qt creator is not highlighted and I can not Run The Calculator. If it helps here is a screenshot. prnt.sc/gql37e

[@Rubenjr005]

Also when I click on Edit Tab it does not show any Files under Projects. prnt.sc/gql4aj

[@suharsh96]

I love the internet

[@-pvp4ka-96]

Suharsh Tyagi lol

[@nasserjaved]

he spelled "pickle" wrong in the annotation 13:33

[@ProgrammingLiftoff]

Lol, I messed that up bad. Messed up trying to correct my mess up, haha.

[@katkosmos]

I know it's hard to know how to pronounce names for libraries/frameworks/software if you only ever read it, but it's actually pronounced as just "cute", not "cu-tee". I only just learned this a week or two ago.

[@ProgrammingLiftoff]

Yes! I think I corrected my pronunciation in a later video. Its just so tempting to say it as "cu-tee". Thanks for watching!

[@justsomenamelesssoul8097]

Terrible tutorial