title
Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart

description
You don't need to learn Android/ Java and iOS/ Swift development to build real native mobile apps! Join the full Flutter course: https://acad.link/flutter Check out all our other courses: https://academind.com/learn/our-courses Join our Academind Community on Discord for free: https://discord.gg/gxvEWGU You don't need to learn Android/ Java and iOS/ Swift development to build real native mobile apps! Flutter - a framework developed by Google - allows you to learn one language (Dart) and build beautiful native mobile apps in no time. Flutter is a SDK providing the tooling to compile that Dart code into native code and it also gives you a rich set of pre-built and pre-styled UI elements (so called widgets) which you can use to compose your user interfaces! Let's get started in this video! ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': "Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart", 'heatmap': [{'end': 2794.013, 'start': 2665.947, 'weight': 1}, {'end': 8501.81, 'start': 8367.808, 'weight': 0.73}], 'summary': 'This tutorial covers flutter app development, setup, and environment, emphasizing the use of dart programming language, setting up flutter in android studio and windows, creating widgets and managing products, implementing product manager, structuring apps, and exploring material design.', 'chapters': [{'end': 329.875, 'segs': [{'end': 329.875, 'src': 'embed', 'start': 295.02, 'weight': 0, 'content': [{'end': 298.121, 'text': "This is a screenshot of the finished app we'll build in this course.", 'start': 295.02, 'duration': 3.101}, {'end': 302.361, 'text': 'And on this screen, we can identify a lot of widgets.', 'start': 298.781, 'duration': 3.58}, {'end': 305.182, 'text': 'And actually, there are even more widgets than I marked here.', 'start': 302.701, 'duration': 2.481}, {'end': 307.763, 'text': 'For example, that add image button at the bottom.', 'start': 305.422, 'duration': 2.341}, {'end': 314.644, 'text': 'Well, that button is a widget, and then it has two child widgets, the camera icon and the add image text.', 'start': 308.303, 'duration': 6.341}, {'end': 316.704, 'text': 'And this is how you build the Flutter app.', 'start': 315.244, 'duration': 1.46}, {'end': 319.505, 'text': 'And even the whole app, as I mentioned, is one widget.', 'start': 316.984, 'duration': 2.521}, {'end': 323.489, 'text': 'This gives you that widget tree where you have a root widget wrapping the app.', 'start': 320.225, 'duration': 3.264}, {'end': 327.933, 'text': 'Then you have widgets for the different pages you might have in your app between you can navigate.', 'start': 323.789, 'duration': 4.144}, {'end': 329.875, 'text': "Obviously, you'll learn this in this course.", 'start': 328.374, 'duration': 1.501}], 'summary': 'The flutter app consists of various widgets, including the root widget and child widgets, which will be covered in the course.', 'duration': 34.855, 'max_score': 295.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc295020.jpg'}], 'start': 15.305, 'title': 'Introduction to flutter framework', 'summary': "Introduces flutter as a software development kit for creating mobile 2d apps, emphasizing its framework and pre-built widgets, and highlighting the use of dart programming language. it also highlights the advantages of using flutter, such as writing code in one language (dart), the framework's features for building native apps, and the core architecture of flutter apps.", 'chapters': [{'end': 75.949, 'start': 15.305, 'title': 'Introduction to flutter framework', 'summary': 'Introduces flutter as a software development kit for creating mobile 2d apps, emphasizing its framework and pre-built widgets, and highlighting the use of dart programming language.', 'duration': 60.644, 'highlights': ["Flutter is a SDK for creating mobile 2D apps, with a focus on 2D app development. It's a SDK, a software development kit for creating mobile 2D apps. If you're planning some 2D app, which the majority of apps are in the App Store, then Flutter is your thing.", "Flutter's framework is based on Dart programming language and ships with a huge set of pre-built widgets. The most important part probably is the framework it ships with. Flutter is a framework for Dart, and a framework is just a set of utility functions, classes, objects you can use in that programming language so that you don't have to write everything from scratch. Flutter ships with a huge set of pre-built widgets, for example."]}, {'end': 329.875, 'start': 75.949, 'title': 'Flutter: building native apps', 'summary': "Highlights the advantages of using flutter, such as writing code in one language (dart), the framework's features for building native apps, and the core architecture of flutter apps, which are built using a tree of widgets, enabling platform differentiation while maintaining one code base.", 'duration': 253.926, 'highlights': ['Flutter enables writing code in one language, Dart, and using its framework features to build native apps, eliminating the need to learn multiple languages such as Java or Swift. Developers can write code in Dart and utilize the features of the Flutter framework to build native apps, eliminating the need to learn multiple languages such as Java or Swift.', "Flutter provides a set of tools for testing the app on devices with features like auto reload, making the development process more efficient and convenient. Flutter offers tools for testing apps on devices with features like auto reload, enhancing the development process's efficiency and convenience.", "Flutter apps are structured as a tree of widgets, allowing for the organization of UI elements and embracing platform differences to execute different code based on the platform. Flutter apps are organized as a tree of widgets, allowing for the arrangement of UI elements and enabling the execution of different code based on the platform's differences."]}], 'duration': 314.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc15305.jpg', 'highlights': ['Flutter is a SDK for creating mobile 2D apps, with a focus on 2D app development.', "Flutter's framework is based on Dart programming language and ships with a huge set of pre-built widgets.", 'Developers can write code in Dart and utilize the features of the Flutter framework to build native apps, eliminating the need to learn multiple languages such as Java or Swift.', "Flutter offers tools for testing apps on devices with features like auto reload, enhancing the development process's efficiency and convenience.", "Flutter apps are organized as a tree of widgets, allowing for the arrangement of UI elements and enabling the execution of different code based on the platform's differences."]}, {'end': 1250.251, 'segs': [{'end': 953.096, 'src': 'embed', 'start': 861.767, 'weight': 0, 'content': [{'end': 866.25, 'text': 'So install Xcode by downloading it from the Mac App Store.', 'start': 861.767, 'duration': 4.483}, {'end': 873.016, 'text': 'And once you got it installed, you need to make sure that you can use the so-called Xcode command line tools.', 'start': 866.991, 'duration': 6.025}, {'end': 879.36, 'text': 'And this can be done by simply copy and pasting this command into your terminal.', 'start': 873.876, 'duration': 5.484}, {'end': 880.942, 'text': 'So you can simply run this.', 'start': 879.641, 'duration': 1.301}, {'end': 884.104, 'text': 'You might be prompted to enter your password there.', 'start': 881.702, 'duration': 2.402}, {'end': 890.22, 'text': 'And then it might or might not do something depending on whether you already configured this.', 'start': 886.038, 'duration': 4.182}, {'end': 892.762, 'text': 'It might prompt you to accept the license.', 'start': 890.601, 'duration': 2.161}, {'end': 903.228, 'text': 'Once you completed this step, you can continue to step number three and execute this command to accept the license agreements of Xcode build,', 'start': 893.462, 'duration': 9.766}, {'end': 904.728, 'text': "which is the build tool we're going to use.", 'start': 903.228, 'duration': 1.5}, {'end': 914.134, 'text': 'Now here you can simply scroll to the bottom, which can be sped up by hitting space a couple of times and then type agree down there.', 'start': 905.269, 'duration': 8.865}, {'end': 923.277, 'text': 'Now with that out of the way, we can continue and we can bring up the iOS simulator, which simply is iPhone running on our machine.', 'start': 915.494, 'duration': 7.783}, {'end': 926.058, 'text': 'It can be started with this command.', 'start': 924.197, 'duration': 1.861}, {'end': 936.501, 'text': 'You could also start it from within the Xcode, by the way, but I will simply start it with this command, open dash a simulator with a capital S.', 'start': 926.278, 'duration': 10.223}, {'end': 942.343, 'text': 'And now what this should do is it should bring up this iOS simulator here.', 'start': 936.501, 'duration': 5.842}, {'end': 944.368, 'text': 'Now this is the device running.', 'start': 942.987, 'duration': 1.381}, {'end': 953.096, 'text': "You can change the type of phone you're emulating here from that menu device and then iOS and then choose your favorite device here.", 'start': 944.488, 'duration': 8.608}], 'summary': 'Install xcode, configure tools, accept license, and launch ios simulator.', 'duration': 91.329, 'max_score': 861.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc861767.jpg'}, {'end': 1085.922, 'src': 'embed', 'start': 1042.685, 'weight': 3, 'content': [{'end': 1052.993, 'text': 'but you want to keep that running so that you can always rebuild your project and instantly ship that new version to the device whenever you change something in your code.', 'start': 1042.685, 'duration': 10.308}, {'end': 1058.837, 'text': 'so with that You should see this your first Flutter app running on the iPhone.', 'start': 1052.993, 'duration': 5.844}, {'end': 1063.382, 'text': 'And you can hit that plus button to see a counter that is incremented.', 'start': 1059.438, 'duration': 3.944}, {'end': 1066.365, 'text': 'This is an app the Flutter tool created for you.', 'start': 1063.803, 'duration': 2.562}, {'end': 1068.888, 'text': "We of course didn't write any code yet.", 'start': 1066.686, 'duration': 2.202}, {'end': 1070.329, 'text': "Now that's cool.", 'start': 1069.709, 'duration': 0.62}, {'end': 1075.915, 'text': 'And we will actually edit this a little bit to see how we can, well, work with that first Flutter app.', 'start': 1070.55, 'duration': 5.365}, {'end': 1082.7, 'text': "But obviously, we also want to build for Android, right? So let's go back to these installation docs.", 'start': 1076.596, 'duration': 6.104}, {'end': 1085.922, 'text': "We're done with the iOS setup here, the simulator at least.", 'start': 1082.8, 'duration': 3.122}], 'summary': 'Flutter app running on iphone, with plans to build for android.', 'duration': 43.237, 'max_score': 1042.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1042685.jpg'}, {'end': 1164.718, 'src': 'embed', 'start': 1133.536, 'weight': 4, 'content': [{'end': 1135.176, 'text': "now i'll move on to android.", 'start': 1133.536, 'duration': 1.64}, {'end': 1145.221, 'text': 'for now, and for that we will need android studio, just like xcode is the official ide and contains all the build tools for ios apps,', 'start': 1135.176, 'duration': 10.045}, {'end': 1152.604, 'text': 'android studio is the same for android, so click that link to be forwarded to the download page of android studio,', 'start': 1145.221, 'duration': 7.383}, {'end': 1157.85, 'text': 'And on that page it should automatically present you the Mac OS download.', 'start': 1153.405, 'duration': 4.445}, {'end': 1164.718, 'text': 'So you can simply hit Download Android Studio here, accept these license agreements and, well, then download.', 'start': 1158.431, 'duration': 6.287}], 'summary': 'Android development requires android studio for mac os download and installation.', 'duration': 31.182, 'max_score': 1133.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1133536.jpg'}, {'end': 1218.565, 'src': 'embed', 'start': 1183.037, 'weight': 5, 'content': [{'end': 1185.039, 'text': 'Let me also close the iOS simulator here.', 'start': 1183.037, 'duration': 2.002}, {'end': 1190.646, 'text': 'Now in that Android Studio installer is pretty straightforward on Mac.', 'start': 1187.021, 'duration': 3.625}, {'end': 1193.449, 'text': 'Just drag that into that applications folder.', 'start': 1191.146, 'duration': 2.303}, {'end': 1204.041, 'text': 'And this will copy or install that tool in that folder, which again will take a couple of seconds since it also unpacks that folder.', 'start': 1195.458, 'duration': 8.583}, {'end': 1209.682, 'text': "And once you are done with that, let's go back to the Flutter installation page.", 'start': 1204.901, 'duration': 4.781}, {'end': 1218.565, 'text': "Once you're done with that, you need to start Android Studio and go through the setup wizard to configure everything and install everything you need.", 'start': 1210.482, 'duration': 8.083}], 'summary': 'Installing android studio on mac is straightforward by dragging into the applications folder, with flutter requiring setup in android studio.', 'duration': 35.528, 'max_score': 1183.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1183037.jpg'}], 'start': 330.336, 'title': 'Flutter setup and environment', 'summary': 'Covers understanding flutter, its compilation to native code, and the setup process for mac os and windows. it also provides steps to install flutter on mac or linux, and guides through setting up xcode for ios development and android studio for android development.', 'chapters': [{'end': 468.013, 'start': 330.336, 'title': 'Understanding flutter and setting up environment', 'summary': 'Explains how flutter works, its compilation to native code, and the setup process for mac os and windows. it also mentions the capability of flutter to run apps on android and ios, with the flutter sdk handling the compilation, and the upcoming app creation process.', 'duration': 137.677, 'highlights': ['Flutter compiles Dart code to native code for Android and iOS platforms, with the help of Flutter SDK and its utility features. The chapter explains how Flutter compiles Dart code to native code for Android and iOS platforms using the Flutter SDK, which provides utility features and built-in widgets. This process enables developers to write powerful and flexible apps.', 'The installation process for Flutter differs between Mac OS and Windows, with specific setup steps provided for each platform. The transcript details the differing installation processes for Mac OS and Windows, directing viewers to specific setup steps for each platform, ensuring a smooth installation process for both Mac and Windows users.', 'Flutter allows developers to create apps without worrying about writing native device code, providing a convenient and efficient development environment. The chapter emphasizes that developers using Flutter do not need to write native device code, as the Flutter SDK handles the compilation of Dart code to native code for Android and iOS platforms, providing a convenient and efficient development environment.']}, {'end': 833.702, 'start': 468.753, 'title': 'Installing flutter on mac and linux', 'summary': 'Explains the steps to install flutter on mac or linux, including downloading and installing git, downloading flutter, setting up the flutter tool, and running flutter doctor to check the installation.', 'duration': 364.949, 'highlights': ['Downloading and installing Git The process involves searching for Git, downloading and installing it, which is necessary for using Flutter.', 'Downloading and unzipping Flutter The steps include downloading the latest version of Flutter, unzipping the file, and copying the Flutter folder to a desired location.', 'Setting up the Flutter tool and updating the path This involves configuring the Flutter tool to be accessed globally through the command line by updating the path permanently.', "Running Flutter doctor to check installation The command 'Flutter doctor' is used to check if the Flutter installation is set up correctly and to identify any additional requirements."]}, {'end': 1250.251, 'start': 833.702, 'title': 'Setting up ios and android development', 'summary': 'Guides through setting up xcode for ios development, including installing xcode, accepting license agreements, and running the ios simulator. it also covers setting up android studio for android development, from downloading to setting up the software.', 'duration': 416.549, 'highlights': ['Setting up Xcode for iOS development The chapter guides through the process of installing Xcode from the Mac App Store, accepting license agreements, and running the iOS simulator to test and run Flutter apps.', 'Setting up Android Studio for Android development It covers the process of downloading and installing Android Studio, going through the setup wizard to configure and install necessary components for Android development.', "Creating a new Flutter project The process of creating a new Flutter project is explained, including using the command 'flutter create' followed by the project name, and running the app with 'flutter run' to see it on the iOS simulator."]}], 'duration': 919.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc330336.jpg', 'highlights': ['Flutter compiles Dart code to native code for Android and iOS platforms using the Flutter SDK and its utility features.', 'The installation process for Flutter differs between Mac OS and Windows, with specific setup steps provided for each platform.', 'Developers using Flutter do not need to write native device code, as the Flutter SDK handles the compilation of Dart code to native code for Android and iOS platforms.', 'Downloading and installing Git is necessary for using Flutter.', 'The steps for downloading and unzipping Flutter are detailed, including copying the Flutter folder to a desired location.', 'Configuring the Flutter tool to be accessed globally through the command line by updating the path permanently is explained.', "Running 'Flutter doctor' is used to check if the Flutter installation is set up correctly and to identify any additional requirements.", 'The chapter guides through the process of installing Xcode from the Mac App Store, accepting license agreements, and running the iOS simulator to test and run Flutter apps.', 'The process of downloading and installing Android Studio, configuring and installing necessary components for Android development is covered.', "The process of creating a new Flutter project is explained, including using the command 'flutter create' followed by the project name, and running the app with 'flutter run' to see it on the iOS simulator."]}, {'end': 1968.245, 'segs': [{'end': 1592.709, 'src': 'embed', 'start': 1565.495, 'weight': 1, 'content': [{'end': 1570.799, 'text': "i'll quit it, though, because i have another id which i like more, and that's visual studio code.", 'start': 1565.495, 'duration': 5.304}, {'end': 1577.722, 'text': "You install it from codevisualstudio.com and it's a free IDE, just like Android Studio.", 'start': 1571.539, 'duration': 6.183}, {'end': 1584.665, 'text': 'It should automatically present you the right download option for Mac and you can simply, well, download it then.', 'start': 1578.102, 'duration': 6.563}, {'end': 1592.709, 'text': 'And once you did download it, you will have a file which you can execute and which will walk you through the installer.', 'start': 1585.205, 'duration': 7.504}], 'summary': 'Visual studio code is a free ide, install from code.visualstudio.com, available for mac.', 'duration': 27.214, 'max_score': 1565.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1565495.jpg'}, {'end': 1842.448, 'src': 'embed', 'start': 1799.626, 'weight': 0, 'content': [{'end': 1803.289, 'text': "Now, if you're using Windows, let's now install it for Windows too.", 'start': 1799.626, 'duration': 3.663}, {'end': 1806.472, 'text': "If you're using Mac only, you can therefore skip this video.", 'start': 1803.73, 'duration': 2.742}, {'end': 1816.199, 'text': "So, to install Flutter on Windows, first of all, let's visit flutter.io, click on Get Started there, and then choose Install on Windows.", 'start': 1807.252, 'duration': 8.947}, {'end': 1826.003, 'text': 'there you will see all the installation steps in detail and i strongly recommend also going through these step by step along with the video,', 'start': 1817.06, 'duration': 8.943}, {'end': 1836.546, 'text': "because for one they can't change in one or the other detail in the future, and then this is great to see, or easy to see in that written form,", 'start': 1826.003, 'duration': 10.543}, {'end': 1842.448, 'text': "and additionally it's easy to miss a step, and therefore this is a great companion for this video.", 'start': 1836.546, 'duration': 5.902}], 'summary': 'Install flutter on windows by following the detailed steps on flutter.io.', 'duration': 42.822, 'max_score': 1799.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1799626.jpg'}, {'end': 1916.656, 'src': 'embed', 'start': 1869.015, 'weight': 2, 'content': [{'end': 1874.158, 'text': 'Then we have the chance to download that Git tool from that Git page here.', 'start': 1869.015, 'duration': 5.143}, {'end': 1878.14, 'text': 'It should automatically give you the right download for your machine.', 'start': 1874.959, 'duration': 3.181}, {'end': 1881.823, 'text': 'Download it and then walk through the installer.', 'start': 1878.861, 'duration': 2.962}, {'end': 1890.548, 'text': 'Now, in the installer, you can choose the place where you want to install Git, then simply hit next and, well, install that tool.', 'start': 1882.443, 'duration': 8.105}, {'end': 1896.551, 'text': 'Now, very important, you click next a couple of times and most of the default settings are fine.', 'start': 1891.148, 'duration': 5.403}, {'end': 1905.709, 'text': 'One important thing to notice that on this screen here, you should use use Git from the Windows command prompt.', 'start': 1898.465, 'duration': 7.244}, {'end': 1907.731, 'text': "Don't use one of the other two options.", 'start': 1906.03, 'duration': 1.701}, {'end': 1909.212, 'text': 'Use the middle one here.', 'start': 1908.131, 'duration': 1.081}, {'end': 1912.253, 'text': 'This is also mentioned in the official docs.', 'start': 1910.032, 'duration': 2.221}, {'end': 1916.656, 'text': 'Now with that hit next a couple of times and leave all the other defaults.', 'start': 1913.174, 'duration': 3.482}], 'summary': 'Download git tool, choose installation location, use windows command prompt option, and proceed with default settings.', 'duration': 47.641, 'max_score': 1869.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1869015.jpg'}], 'start': 1250.551, 'title': 'Setting up flutter', 'summary': 'Covers the process of setting up flutter in android studio, including the installation of sdks and tools, configuring plugins, and restarting the ide. it also explains setting up flutter on android and windows, including creating and running an android virtual device, installing visual studio code, using hot reload, and installing flutter on windows with git and the flutter sdk.', 'chapters': [{'end': 1395.297, 'start': 1250.551, 'title': 'Setting up flutter in android studio', 'summary': 'Covers the process of setting up flutter in android studio, including the installation of sdks and tools, configuring plugins, and restarting the ide, which may take a couple of minutes and involves downloading various components.', 'duration': 144.746, 'highlights': ['Setting up Flutter in Android Studio involves downloading SDKs and tools necessary for developing Android apps, which are used behind the scenes by Flutter.', 'The process may take a couple of minutes, as it downloads and installs quite a lot of things.', 'Configuring the Flutter plugin and installing the Dart plugin are part of the setup process in Android Studio.', 'Restarting the IDE may prompt message for IDE and plugin updates, which involve installing the latest versions of SDKs and build tools.']}, {'end': 1968.245, 'start': 1395.297, 'title': 'Setting up flutter for android and windows', 'summary': 'Explains how to set up flutter on android and windows, including creating and running an android virtual device, installing visual studio code, using hot reload, and installing flutter on windows with git and the flutter sdk.', 'duration': 572.948, 'highlights': ['Installing and running an Android virtual device for Flutter The chapter demonstrates how to create and run an Android virtual device for Flutter, allowing for the installation and testing of Flutter apps on the emulator.', 'Installing Visual Studio Code and adding Flutter and Dart extensions The chapter explains how to install Visual Studio Code, add the official Flutter and Dart extensions, and enhance the coding experience by adding the optional material icon theme.', 'Utilizing hot reload for faster development The chapter showcases the use of hot reload in Flutter development, enabling developers to make changes to the code and see the results instantly on the emulator without the need for a full rebuild.', 'Installing Flutter on Windows using Git and the Flutter SDK The chapter provides a detailed guide on installing Flutter on Windows, including the installation of Git for Windows, downloading and installing the Flutter SDK, and ensuring the correct settings during the installation process.']}], 'duration': 717.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1250551.jpg', 'highlights': ['Installing and running an Android virtual device for Flutter', 'Utilizing hot reload for faster development', 'Installing Flutter on Windows using Git and the Flutter SDK', 'Configuring the Flutter plugin and installing the Dart plugin in Android Studio', 'Restarting the IDE may prompt message for IDE and plugin updates']}, {'end': 3109.051, 'segs': [{'end': 2194.548, 'src': 'embed', 'start': 2172.329, 'weight': 6, 'content': [{'end': 2185.239, 'text': "But the fact that you're seeing this and not something like flutter not recognized means that we did successfully add it to our path and that we can use that flutter command line tool from our command prompt.", 'start': 2172.329, 'duration': 12.91}, {'end': 2189.565, 'text': 'now. flutter is now available.', 'start': 2186.383, 'duration': 3.182}, {'end': 2194.548, 'text': 'the next step we have to do is we have to set up android studio.', 'start': 2189.565, 'duration': 4.983}], 'summary': 'Successfully added flutter to path, now available to use. next step: set up android studio.', 'duration': 22.219, 'max_score': 2172.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2172329.jpg'}, {'end': 2266.125, 'src': 'embed', 'start': 2240.342, 'weight': 7, 'content': [{'end': 2246.588, 'text': 'Now, once the download did finish, simply execute the executable you got and the installer will start.', 'start': 2240.342, 'duration': 6.246}, {'end': 2248.489, 'text': 'Now, there you can continue.', 'start': 2247.008, 'duration': 1.481}, {'end': 2255.395, 'text': 'Make sure to choose Android Virtual Device as a component you want to install though.', 'start': 2249.05, 'duration': 6.345}, {'end': 2257.057, 'text': "That's important that you tick that.", 'start': 2255.495, 'duration': 1.562}, {'end': 2266.125, 'text': 'Thereafter, you can choose the location where you want to install Android Studio and you can use the default here or pick your own location on your machine.', 'start': 2257.677, 'duration': 8.448}], 'summary': 'To install android studio, execute the downloaded executable, choose android virtual device component, and select the installation location.', 'duration': 25.783, 'max_score': 2240.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2240342.jpg'}, {'end': 2557.786, 'src': 'embed', 'start': 2530.859, 'weight': 1, 'content': [{'end': 2536.02, 'text': 'There you choose your blueprint, basically regarding the general hardware and layout profile.', 'start': 2530.859, 'duration': 5.161}, {'end': 2538.381, 'text': "I'll go with the Pixel 2 here.", 'start': 2536.6, 'duration': 1.781}, {'end': 2543.102, 'text': 'On the next screen, you choose the image, the Android version you want to use.', 'start': 2539.261, 'duration': 3.841}, {'end': 2553.364, 'text': 'And I recommend not going with the cutting edge version, but using the latest stable version, in my case, Oreo API level 27.', 'start': 2543.662, 'duration': 9.702}, {'end': 2555.665, 'text': "Typically, that's the one which is selected by default.", 'start': 2553.364, 'duration': 2.301}, {'end': 2557.786, 'text': 'hit next again.', 'start': 2556.545, 'duration': 1.241}], 'summary': 'Choose pixel 2 as the hardware, oreo api level 27 as the android version, and proceed to the next step.', 'duration': 26.927, 'max_score': 2530.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2530859.jpg'}, {'end': 2602.76, 'src': 'embed', 'start': 2576.906, 'weight': 0, 'content': [{'end': 2585.451, 'text': 'Now, with that created, you can start it by clicking on that play button on the right and this will open the virtual device on your screen.', 'start': 2576.906, 'duration': 8.545}, {'end': 2589.313, 'text': 'It will bring up an Android phone on your machine, so to say.', 'start': 2585.531, 'duration': 3.782}, {'end': 2597.177, 'text': "Now, with that running, we can't run our Flutter app yet because we still need to do some things.", 'start': 2590.753, 'duration': 6.424}, {'end': 2602.76, 'text': 'For one, we need to install the missing dependencies, the missing plugins.', 'start': 2598.137, 'duration': 4.623}], 'summary': 'To run flutter app, install missing dependencies and plugins.', 'duration': 25.854, 'max_score': 2576.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2576906.jpg'}, {'end': 2794.013, 'src': 'heatmap', 'start': 2665.947, 'weight': 1, 'content': [{'end': 2672.533, 'text': "Now we still don't see our emulator here at the top and therefore we still can't start our application.", 'start': 2665.947, 'duration': 6.586}, {'end': 2674.615, 'text': "Let's quit the emulator for now.", 'start': 2673.194, 'duration': 1.421}, {'end': 2683.167, 'text': 'And to make it work, first of all, go back to the setup instructions and make sure to install that Google USB driver.', 'start': 2676.764, 'duration': 6.403}, {'end': 2691.072, 'text': "Now, that should only be important for running it on a real device, but it still doesn't hurt to set it up already so that it will work later.", 'start': 2683.348, 'duration': 7.724}, {'end': 2695.854, 'text': 'So click on that link you see there and install the USB driver.', 'start': 2691.892, 'duration': 3.962}, {'end': 2706.819, 'text': "You can do that from within Android Studio by going back into it and they're going to Tools, SDK Manager and in the SDK Manager.", 'start': 2696.034, 'duration': 10.785}, {'end': 2710.421, 'text': 'go to SDK Tools and choose Google USB driver there.', 'start': 2706.819, 'duration': 3.602}, {'end': 2713.783, 'text': 'Hit OK thereafter or apply and install it.', 'start': 2710.681, 'duration': 3.102}, {'end': 2717.285, 'text': 'You also need to accept the license agreements there.', 'start': 2714.943, 'duration': 2.342}, {'end': 2719.466, 'text': 'Now, with it installed.', 'start': 2718.105, 'duration': 1.361}, {'end': 2733.353, 'text': 'You will need to also do one more thing if you installed your Android SDK in a different place on your operating system than the one suggested during the wizard,', 'start': 2720.287, 'duration': 13.066}, {'end': 2734.254, 'text': 'which I did.', 'start': 2733.353, 'duration': 0.901}, {'end': 2737.395, 'text': 'You need to add one other environment variable.', 'start': 2735.034, 'duration': 2.361}, {'end': 2745.179, 'text': "You can also see that if you go back to the command prompt and run flutter doctor, a tool which tells you what's missing.", 'start': 2737.876, 'duration': 7.303}, {'end': 2748.541, 'text': "Here it tells me that it's unable to locate the Android SDK.", 'start': 2745.639, 'duration': 2.902}, {'end': 2758.226, 'text': 'And therefore, I will go back to my control panel and there to user accounts, user accounts, and then change my environment variables.', 'start': 2749.521, 'duration': 8.705}, {'end': 2760.947, 'text': 'And first of all, we need to add a brand new variable.', 'start': 2758.606, 'duration': 2.341}, {'end': 2762.368, 'text': 'So click new here.', 'start': 2761.187, 'duration': 1.181}, {'end': 2769.19, 'text': 'And then name that variable, and the name is important, android,home, all uppercase.', 'start': 2763.408, 'duration': 5.782}, {'end': 2771.391, 'text': 'Make sure to not add a typo here.', 'start': 2769.41, 'duration': 1.981}, {'end': 2780.155, 'text': 'Now, with that name defined, you need to define a value, and that simply is a path pointing to the Android SDK.', 'start': 2772.372, 'duration': 7.783}, {'end': 2794.013, 'text': 'You can click Browse Directory here to choose the Android SDK location and there simply choose the location you selected during the wizard or in the wizard which opened or which ran when you opened Android Studio.', 'start': 2781.055, 'duration': 12.958}], 'summary': 'To set up the emulator, install google usb driver and add android sdk environment variable.', 'duration': 128.066, 'max_score': 2665.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2665947.jpg'}, {'end': 2719.466, 'src': 'embed', 'start': 2676.764, 'weight': 2, 'content': [{'end': 2683.167, 'text': 'And to make it work, first of all, go back to the setup instructions and make sure to install that Google USB driver.', 'start': 2676.764, 'duration': 6.403}, {'end': 2691.072, 'text': "Now, that should only be important for running it on a real device, but it still doesn't hurt to set it up already so that it will work later.", 'start': 2683.348, 'duration': 7.724}, {'end': 2695.854, 'text': 'So click on that link you see there and install the USB driver.', 'start': 2691.892, 'duration': 3.962}, {'end': 2706.819, 'text': "You can do that from within Android Studio by going back into it and they're going to Tools, SDK Manager and in the SDK Manager.", 'start': 2696.034, 'duration': 10.785}, {'end': 2710.421, 'text': 'go to SDK Tools and choose Google USB driver there.', 'start': 2706.819, 'duration': 3.602}, {'end': 2713.783, 'text': 'Hit OK thereafter or apply and install it.', 'start': 2710.681, 'duration': 3.102}, {'end': 2717.285, 'text': 'You also need to accept the license agreements there.', 'start': 2714.943, 'duration': 2.342}, {'end': 2719.466, 'text': 'Now, with it installed.', 'start': 2718.105, 'duration': 1.361}], 'summary': 'To run on a real device, install google usb driver via android studio sdk manager', 'duration': 42.702, 'max_score': 2676.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2676764.jpg'}, {'end': 2947.661, 'src': 'embed', 'start': 2917.644, 'weight': 3, 'content': [{'end': 2920.305, 'text': 'And in there, you can run flutter run.', 'start': 2917.644, 'duration': 2.661}, {'end': 2928.388, 'text': 'And this will now do the exact same as you did with the command inside or with the click of the button inside Android Studio,', 'start': 2921.145, 'duration': 7.243}, {'end': 2930.929, 'text': 'but without you doing it through Android Studio.', 'start': 2928.388, 'duration': 2.541}, {'end': 2934.811, 'text': 'It will build the app and ship it to your emulator and run it there.', 'start': 2931.189, 'duration': 3.622}, {'end': 2940.575, 'text': "And this is actually how I will run my apps for the rest of this course since I won't use Android Studio.", 'start': 2935.511, 'duration': 5.064}, {'end': 2942.397, 'text': 'You can use either approach.', 'start': 2940.976, 'duration': 1.421}, {'end': 2947.661, 'text': "However, using Flutter run will have advantages like the hot reloading I'll introduce in a second.", 'start': 2942.597, 'duration': 5.064}], 'summary': "Using 'flutter run' will build and run the app on an emulator without using android studio, offering advantages including hot reloading.", 'duration': 30.017, 'max_score': 2917.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc2917644.jpg'}], 'start': 1968.245, 'title': 'Setting up flutter environment', 'summary': 'Covers installing flutter sdk and updating path variable, setting up flutter and android studio, setting up flutter in android studio, and running flutter app without android studio, including steps for installation and configuration, such as adding to path, setting up virtual devices, installing missing dependencies, and running apps from the command prompt and visual studio code.', 'chapters': [{'end': 2171.909, 'start': 1968.245, 'title': 'Installing flutter sdk and updating path variable', 'summary': 'Explains the process of installing flutter sdk globally on a machine and updating the path variable to be able to run flutter commands from the normal command prompt, with steps including extracting the flutter folder, running flutter console.bat, updating the path variable, and restarting windows if needed.', 'duration': 203.664, 'highlights': ['The Flutter tool is a sdk, a software development kit which you install globally on your machine to create new Flutter projects and work with them. Emphasizes the importance of Flutter as a global installation for creating and managing Flutter projects.', 'The process of updating the path variable is explained in detail, including accessing the control panel, navigating to user accounts, and adding the path to the Flutter bin subfolder. Provides a detailed explanation of updating the path variable to enable running Flutter commands from the normal command prompt.', 'Restarting Windows is recommended if facing issues after updating the path variable to ensure the changes take effect. Recommends the necessary action to resolve any issues faced after updating the path variable.', "Running 'flutter console.bat' opens a command prompt with Flutter, enabling the execution of Flutter commands and building apps. Describes the action of running 'flutter console.bat' to open a command prompt with Flutter for executing commands and building apps."]}, {'end': 2574.939, 'start': 2172.329, 'title': 'Setting up flutter and android studio', 'summary': 'Outlines the process of setting up flutter, adding it to the path, downloading and installing android studio, configuring the ui theme, creating a flutter project, and setting up a virtual device in android studio to run the flutter app.', 'duration': 402.61, 'highlights': ['The chapter outlines the process of setting up Flutter and adding it to the path, followed by downloading and installing Android Studio This includes ensuring the availability of flutter command line tool, downloading the official Android Studio SDK, and installing Android Virtual Device component.', 'Guidance on configuring the UI theme and checking the Android Virtual Device option during installation in Android Studio The chapter provides guidance on choosing a UI theme and ensuring the Android Virtual Device option is ticked during installation.', "Creating a new Flutter project using the command 'flutter create' and opening it in Android Studio The process involves navigating to the desired folder, creating a new Flutter project using 'flutter create', and opening the project in Android Studio.", 'Setting up a virtual device in Android Studio for running the Flutter app The chapter details the process of setting up a virtual device in Android Studio, including choosing the hardware profile, selecting the Android version, and enabling hardware acceleration.']}, {'end': 2838.965, 'start': 2576.906, 'title': 'Setting up flutter in android studio', 'summary': 'Outlines the process of setting up flutter in android studio, including installing missing dependencies and configuring the environment, such as installing dart and flutter plugins, setting up the google usb driver, and adding the android sdk to the environment variables.', 'duration': 262.059, 'highlights': ["Installing missing dependencies, such as Dart and Flutter plugins, is a crucial step in setting up Flutter in Android Studio, and can be done by clicking on 'Install Plugins' and following the prompts.", 'Setting up the Google USB driver by navigating to Tools, SDK Manager, and choosing the Google USB driver in the SDK Tools is essential for running applications on a real device.', "Adding the Android SDK to the environment variables by defining the 'android_home' variable and updating the 'Path' variable with the appropriate entries is necessary for proper configuration and can be verified using the 'flutter doctor' command."]}, {'end': 3109.051, 'start': 2840.06, 'title': 'Running flutter app without android studio', 'summary': 'Explains how to run a flutter app without using android studio, using the command prompt and visual studio code, and also highlights the process of setting up the ide with necessary extensions.', 'duration': 268.991, 'highlights': ["Running Flutter app without Android Studio by using the command prompt and the 'flutter run' command, which will build the app and ship it to the emulator, providing an alternative to using Android Studio for running Flutter apps.", 'Using Visual Studio Code as the preferred editor for running Flutter apps, with instructions on how to download, install, and set up the IDE, including the addition of the Flutter and Dart extensions, which are essential for Flutter development.', 'Adding the material icon theme extension to Visual Studio Code for a different icon look, with the optional but recommended step of reloading the IDE after installation to apply the theme to the Flutter code.', "Making changes to the Flutter code in the lib folder of the project, specifically in the main.dart file, to modify the app's behavior, such as incrementing the counter by two instead of one when the plus button is pressed.", 'Explaining the initial steps of restarting the command prompt and the virtual device, and the time it may take for the build process to start the app on the device, which can take a couple of minutes when run for the first time.']}], 'duration': 1140.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc1968245.jpg', 'highlights': ['The process of updating the path variable is explained in detail, including accessing the control panel, navigating to user accounts, and adding the path to the Flutter bin subfolder.', "Running 'flutter console.bat' opens a command prompt with Flutter, enabling the execution of Flutter commands and building apps.", 'The chapter outlines the process of setting up Flutter and adding it to the path, followed by downloading and installing Android Studio.', 'Setting up a virtual device in Android Studio for running the Flutter app, including choosing the hardware profile, selecting the Android version, and enabling hardware acceleration.', "Installing missing dependencies, such as Dart and Flutter plugins, is a crucial step in setting up Flutter in Android Studio, and can be done by clicking on 'Install Plugins' and following the prompts.", "Running Flutter app without Android Studio by using the command prompt and the 'flutter run' command, which will build the app and ship it to the emulator, providing an alternative to using Android Studio for running Flutter apps.", 'Using Visual Studio Code as the preferred editor for running Flutter apps, with instructions on how to download, install, and set up the IDE, including the addition of the Flutter and Dart extensions, which are essential for Flutter development.', "Making changes to the Flutter code in the lib folder of the project, specifically in the main.dart file, to modify the app's behavior, such as incrementing the counter by two instead of one when the plus button is pressed."]}, {'end': 3952.708, 'segs': [{'end': 3627.288, 'src': 'embed', 'start': 3589.223, 'weight': 0, 'content': [{'end': 3590.945, 'text': "We're pretty much done with getting started.", 'start': 3589.223, 'duration': 1.722}, {'end': 3599.03, 'text': "In the next course module we'll have a look at what these widgets are, how we create our own widgets, how they work together and, in general,", 'start': 3591.185, 'duration': 7.845}, {'end': 3603.353, 'text': "we'll dive into all the basics of the Flutter framework and the Dart language.", 'start': 3599.03, 'duration': 4.323}, {'end': 3604.915, 'text': "You'll learn this along the way.", 'start': 3603.514, 'duration': 1.401}, {'end': 3613.888, 'text': 'Now. thereafter, you will learn how to debug your Flutter app, how to run it on different devices, on emulators, on iPhones, on Android devices,', 'start': 3605.515, 'duration': 8.373}, {'end': 3620.138, 'text': 'how to do all that, because obviously testing and debugging your app is a super important part of the whole development cycle.', 'start': 3613.888, 'duration': 6.25}, {'end': 3627.288, 'text': 'Now thereafter, you will learn how to render lists of content and how to do that in a high performance way.', 'start': 3621.365, 'duration': 5.923}], 'summary': 'Next course module covers basics of flutter and dart, app debugging, running on different devices, and rendering content efficiently.', 'duration': 38.065, 'max_score': 3589.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc3589223.jpg'}, {'end': 3676.876, 'src': 'embed', 'start': 3649.218, 'weight': 4, 'content': [{'end': 3654.56, 'text': 'how to add tabs, how to add a side drawer all that fun stuff.', 'start': 3649.218, 'duration': 5.342}, {'end': 3661.603, 'text': "once done with that, we'll dive into user input and how to handle it, how to present a text field and react to keystrokes.", 'start': 3654.56, 'duration': 7.043}, {'end': 3666.732, 'text': "so when the user types something As a next step, I'll dive deeper into widgets.", 'start': 3661.603, 'duration': 5.129}, {'end': 3672.754, 'text': "I'll explain where you find all available widgets, how to layout pages and, in general,", 'start': 3667.012, 'duration': 5.742}, {'end': 3676.876, 'text': 'dive a bit deeper into this whole concept and into everything you need to know about them.', 'start': 3672.754, 'duration': 4.122}], 'summary': 'Learn to add tabs, side drawer, user input, text field, and widgets in a comprehensive way.', 'duration': 27.658, 'max_score': 3649.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc3649218.jpg'}, {'end': 3952.708, 'src': 'embed', 'start': 3904.684, 'weight': 3, 'content': [{'end': 3914.905, 'text': 'we wrote all the packages we added so that you can compare it to yours or replace yours with it temporarily to find issues, fix issues,', 'start': 3904.684, 'duration': 10.221}, {'end': 3918.486, 'text': 'because most of the issues can be fixed by simply comparing code.', 'start': 3914.905, 'duration': 3.581}, {'end': 3919.887, 'text': "That's why I'm providing it.", 'start': 3918.906, 'duration': 0.981}, {'end': 3926.091, 'text': "Now, if there is something you absolutely can't fix, or if there is something you didn't understand logically,", 'start': 3920.827, 'duration': 5.264}, {'end': 3928.112, 'text': 'you can post questions in the Q&A section.', 'start': 3926.091, 'duration': 2.021}, {'end': 3932.535, 'text': "I'll do my best to answer course related questions as fast as I can.", 'start': 3928.592, 'duration': 3.943}, {'end': 3939.94, 'text': "But I also want to encourage you to help your fellow students answer questions, not because I'm lazy,", 'start': 3933.376, 'duration': 6.564}, {'end': 3945.404, 'text': 'but because this challenges you to think about the concept you thought you understood.', 'start': 3939.94, 'duration': 5.464}, {'end': 3947.285, 'text': 'So definitely do that.', 'start': 3946.164, 'duration': 1.121}, {'end': 3952.708, 'text': "Help our students answer questions and don't be afraid of giving a wrong answer.", 'start': 3947.825, 'duration': 4.883}], 'summary': 'Provided packages for issue resolution, encourage students to help each other in q&a section.', 'duration': 48.024, 'max_score': 3904.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc3904684.jpg'}], 'start': 3110.205, 'title': 'Flutter app development', 'summary': 'Explains the importance of flutter hot reload process and demonstrates incrementing by two instead of one, also covering setting up the windows environment for flutter, alternatives to flutter, and core features including material design and upcoming topics.', 'chapters': [{'end': 3162.503, 'start': 3110.205, 'title': 'Flutter hot reload process', 'summary': 'Explains the importance of keeping the flutter run process running to enable hot reload for app development, with the option to perform a full reload if necessary, showcasing a demonstration of the process with an example of incrementing by two instead of one in the app.', 'duration': 52.298, 'highlights': ['Keeping the flutter run process running allows for hot reload, enabling changes to be pushed into the app without the need for it to rebuild, enhancing the development process.', 'Pressing shift R allows for a full reload and rebuild if the hot reload process fails, ensuring smooth app development.', 'Demonstration of incrementing by two instead of one in the app showcases the successful implementation of changes using the hot reload process.']}, {'end': 3952.708, 'start': 3162.503, 'title': 'Flutter: setup, alternatives, and core features', 'summary': 'Covers setting up the windows environment for flutter, discusses alternatives to flutter for creating native mobile apps, and provides an overview of the core features of flutter, including the material design, its active development, and the upcoming topics to be covered in the course.', 'duration': 790.205, 'highlights': ['Flutter is actively under development and marked as ready for production, with a stable platform and the potential addition of new features. Flutter is actively under development and marked as ready for production, with a stable platform and the potential addition of new features.', 'Discussion on alternatives to Flutter for creating native mobile apps, including real native apps, progressive web apps, and solutions like Ionic and Cordova, with a comparison of their advantages and disadvantages. Discussion on alternatives to Flutter for creating native mobile apps, including real native apps, progressive web apps, and solutions like Ionic and Cordova, with a comparison of their advantages and disadvantages.', 'Overview of the core features of Flutter, such as material design, its flexibility for customization, and embracing material design for both Android and iOS, with an emphasis on adjusting it to specific requirements. Overview of the core features of Flutter, such as material design, its flexibility for customization, and embracing material design for both Android and iOS, with an emphasis on adjusting it to specific requirements.']}], 'duration': 842.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc3110205.jpg', 'highlights': ['Keeping the flutter run process running allows for hot reload, enabling changes to be pushed into the app without the need for it to rebuild, enhancing the development process.', 'Demonstration of incrementing by two instead of one in the app showcases the successful implementation of changes using the hot reload process.', 'Pressing shift R allows for a full reload and rebuild if the hot reload process fails, ensuring smooth app development.', 'Overview of the core features of Flutter, such as material design, its flexibility for customization, and embracing material design for both Android and iOS, with an emphasis on adjusting it to specific requirements.', 'Discussion on alternatives to Flutter for creating native mobile apps, including real native apps, progressive web apps, and solutions like Ionic and Cordova, with a comparison of their advantages and disadvantages.', 'Flutter is actively under development and marked as ready for production, with a stable platform and the potential addition of new features.']}, {'end': 4860.198, 'segs': [{'end': 4518.206, 'src': 'embed', 'start': 4467.432, 'weight': 0, 'content': [{'end': 4475.253, 'text': 'So you can think of this as this entire dart code will be compiled and bundled with the Android or iOS code.', 'start': 4467.432, 'duration': 7.821}, {'end': 4479.154, 'text': 'So it will be bundled into one application which is shipped to your native device.', 'start': 4475.553, 'duration': 3.601}, {'end': 4487.22, 'text': 'And on this device, in this app then, the main.dart file or one specific function in there will be executed first.', 'start': 4479.774, 'duration': 7.446}, {'end': 4492.403, 'text': "And that function which it's looking for in the main.dart file is also called main.", 'start': 4487.9, 'duration': 4.503}, {'end': 4501.87, 'text': "Now a function just in case you're relatively new to programming is essentially a block of code you define which doesn't execute immediately,", 'start': 4492.944, 'duration': 8.926}, {'end': 4504.412, 'text': 'but which needs to be called to be executed.', 'start': 4501.87, 'duration': 2.542}, {'end': 4510.578, 'text': 'a function in flutter is created by typing the name like main,', 'start': 4505.072, 'duration': 5.506}, {'end': 4518.206, 'text': 'and this specific function which flutter is looking for at app startup has to be named main.', 'start': 4510.578, 'duration': 7.628}], 'summary': 'Dart code compiled and bundled with android or ios code, executed on device with main.dart file as entry point.', 'duration': 50.774, 'max_score': 4467.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc4467432.jpg'}, {'end': 4569.9, 'src': 'embed', 'start': 4540.808, 'weight': 1, 'content': [{'end': 4547.454, 'text': 'Now the function body is the code which should be executed and you define it by adding curly braces, opening and closing.', 'start': 4540.808, 'duration': 6.646}, {'end': 4557.857, 'text': 'the code in here will be executed whenever the main function is called, and if you were to call it, you would call it like this simply by typing main.', 'start': 4548.135, 'duration': 9.722}, {'end': 4560.198, 'text': 'this would execute the main function here.', 'start': 4557.857, 'duration': 2.341}, {'end': 4563.678, 'text': "however, for this special function, we won't call it.", 'start': 4560.198, 'duration': 3.48}, {'end': 4569.9, 'text': 'flutter will do that for us automatically, which is why you have to name it main and why it should be in the main.dart file.', 'start': 4563.678, 'duration': 6.222}], 'summary': 'The main function in main.dart file is automatically called by flutter.', 'duration': 29.092, 'max_score': 4540.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc4540808.jpg'}, {'end': 4749.91, 'src': 'embed', 'start': 4721.949, 'weight': 2, 'content': [{'end': 4724.65, 'text': "So let's see how that works and how we create such a widget.", 'start': 4721.949, 'duration': 2.701}, {'end': 4731.266, 'text': "Right now, our Flutter app isn't doing much.", 'start': 4728.942, 'duration': 2.324}, {'end': 4737.074, 'text': "We have that main function and it will get called for us, but we don't know what to do in that main function.", 'start': 4731.406, 'duration': 5.668}, {'end': 4744.365, 'text': 'Now, I just mentioned that the entire Flutter app is built up of widgets, so maybe we should start using such a widget.', 'start': 4737.515, 'duration': 6.85}, {'end': 4748.549, 'text': 'So for that, we actually create our own root widget.', 'start': 4745.206, 'duration': 3.343}, {'end': 4749.91, 'text': 'This is how you typically start.', 'start': 4748.669, 'duration': 1.241}], 'summary': 'Creating a root widget in flutter to build the app.', 'duration': 27.961, 'max_score': 4721.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc4721949.jpg'}, {'end': 4860.198, 'src': 'embed', 'start': 4812.242, 'weight': 3, 'content': [{'end': 4816.708, 'text': 'So my app would be written like this, not with a dash, not with an underscore.', 'start': 4812.242, 'duration': 4.466}, {'end': 4821.225, 'text': 'now that is a class and now you can add features to it.', 'start': 4817.864, 'duration': 3.361}, {'end': 4824.165, 'text': 'features are two kinds of things.', 'start': 4821.225, 'duration': 2.94}, {'end': 4832.307, 'text': 'you can add functions to classes they will then be called methods and you can also add variables to functions.', 'start': 4824.165, 'duration': 8.142}, {'end': 4837.569, 'text': "now i haven't covered variables yet, but you probably know it from other programming languages.", 'start': 4832.307, 'duration': 5.262}, {'end': 4842.17, 'text': 'variables are simply little data structures like, for example, a name.', 'start': 4837.569, 'duration': 4.601}, {'end': 4848.753, 'text': 'If you have something like this, well, name would be a variable holding max as a value.', 'start': 4843.091, 'duration': 5.662}, {'end': 4853.255, 'text': "And if you add such a variable to a class, it's named a property.", 'start': 4849.213, 'duration': 4.042}, {'end': 4856.696, 'text': "But that's some theory which will become clearer once we continue.", 'start': 4853.815, 'duration': 2.881}, {'end': 4860.198, 'text': 'There is one other more important feature we need to cover right now.', 'start': 4857.497, 'duration': 2.701}], 'summary': 'Introduction to writing an app using classes, methods, and properties in programming.', 'duration': 47.956, 'max_score': 4812.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc4812242.jpg'}], 'start': 3952.828, 'title': 'Flutter app development basics', 'summary': 'Introduces the basics of flutter app development, emphasizing the concept of widgets as building blocks for uis and the role of classes in creating blueprints for objects. it also highlights the main.dart file, file structure, and the pubspec.yml file, demonstrating practical application and configuration.', 'chapters': [{'end': 4296.598, 'start': 3952.828, 'title': 'Flutter & dart basics', 'summary': 'Introduces the fundamentals of flutter and dart, emphasizing the importance of widgets as the core building blocks for uis, and guides the audience on setting up a flutter project and running it on a virtual device, demonstrating the practical application of the concepts.', 'duration': 343.77, 'highlights': ['Widgets serve as the core building blocks for UIs in Flutter, and the module focuses on teaching the usage of built-in widgets, organization, and creation of custom widgets, providing practical learning opportunities for the audience. Usage of built-in widgets, organization, and creation of custom widgets', 'Demonstrates the process of creating a new Flutter app using the Flutter command, highlighting the essential steps and considerations for project setup and initialization. Guidance on creating a new Flutter app using the Flutter command', "Provides practical guidance on running a Flutter app on a virtual device, emphasizing the setup and usage of the Android Studio's AVD manager and debugging functionalities within Visual Studio Code. Practical guidance on running a Flutter app on a virtual device"]}, {'end': 4563.678, 'start': 4296.999, 'title': 'Flutter app development basics', 'summary': 'Introduces the main.dart file in the lib folder, highlights the importance of the file structure and the main function in starting the app, and emphasizes the significance of the pubspec.yml file for configuring dependencies and project settings.', 'duration': 266.679, 'highlights': ['The main.dart file is crucial in starting a Flutter app, as it contains the main function that is executed first, and should not be renamed to ensure proper app startup.', 'The file structure includes folders like lib for writing Flutter code, Android and iOS for native code, and pubspec.yml for configuring project dependencies and settings.', 'The pubspec.yml file is essential for configuring project dependencies and settings, such as adding third-party packages and static assets, and needs revisiting from time to time for certain configurations.']}, {'end': 4860.198, 'start': 4563.678, 'title': 'Flutter app development basics', 'summary': 'Explains the basics of flutter app development, emphasizing the concept of widgets as building blocks for user interface components and the role of classes in creating blueprints for objects, with an emphasis on the main function and root widget creation.', 'duration': 296.52, 'highlights': ['Flutter apps consist of multiple widgets like the app bar, navigation bar, and list items. A Flutter app typically consists of multiple widgets, including the app bar, navigation bar at the top, header image, and list items.', 'Widgets in Flutter are user interface components and contain logic, such as defining the behavior of a button when tapped. Widgets in Flutter are not just about visuals but also contain logic, such as defining the behavior of interactive elements like buttons.', 'Creation of a root widget using classes as blueprints for objects is a fundamental concept in Flutter app development. Classes are used to create blueprints for objects, and they play a crucial role in creating root widgets in Flutter app development.']}], 'duration': 907.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc3952828.jpg', 'highlights': ['Usage of built-in widgets, organization, and creation of custom widgets', 'Guidance on creating a new Flutter app using the Flutter command', 'Practical guidance on running a Flutter app on a virtual device', 'The main.dart file is crucial in starting a Flutter app', 'The file structure includes folders like lib for writing Flutter code, Android and iOS for native code, and pubspec.yml for configuring project dependencies and settings', 'The pubspec.yml file is essential for configuring project dependencies and settings, such as adding third-party packages and static assets', 'A Flutter app typically consists of multiple widgets, including the app bar, navigation bar at the top, header image, and list items', 'Widgets in Flutter are not just about visuals but also contain logic, such as defining the behavior of interactive elements like buttons', 'Classes are used to create blueprints for objects, and they play a crucial role in creating root widgets in Flutter app development']}, {'end': 5532.188, 'segs': [{'end': 4899.618, 'src': 'embed', 'start': 4878.101, 'weight': 4, 'content': [{'end': 4888.289, 'text': 'it needs certain features in a class to be able to use it as a widget, so to draw it to the screen, And therefore our class has to extend something.', 'start': 4878.101, 'duration': 10.188}, {'end': 4894.273, 'text': 'This is a concept called inheritance, and you implement it by adding the extends keyword here.', 'start': 4888.789, 'duration': 5.484}, {'end': 4899.618, 'text': 'This allows you to inherit from a base class, so from another class.', 'start': 4894.974, 'duration': 4.644}], 'summary': 'Widget class needs inheritance to draw to screen.', 'duration': 21.517, 'max_score': 4878.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc4878101.jpg'}, {'end': 5144.857, 'src': 'embed', 'start': 5087.686, 'weight': 3, 'content': [{'end': 5096.733, 'text': "you could say and flutter will try to draw something by calling the build method on an object where you tell it that it's a widget.", 'start': 5087.686, 'duration': 9.047}, {'end': 5104.137, 'text': 'So if you pass an object to Flutter to draw it onto the screen, Flutter will always call a build method on that object,', 'start': 5097.114, 'duration': 7.023}, {'end': 5106.058, 'text': 'which is why you need to add it to your own widgets.', 'start': 5104.137, 'duration': 1.921}, {'end': 5117.137, 'text': 'Now the build method actually takes arguments data which will get passed into it by Flutter, because Flutter will be the one calling the build method.', 'start': 5106.974, 'duration': 10.163}, {'end': 5121.478, 'text': 'The build method takes one argument to be precise, the context.', 'start': 5117.837, 'duration': 3.641}, {'end': 5125.799, 'text': 'Context is basically an object with some meta information about your..', 'start': 5122.178, 'duration': 3.621}, {'end': 5130.183, 'text': 'app and the position where this widget is drawn in.', 'start': 5126.719, 'duration': 3.464}, {'end': 5135.008, 'text': 'it, for example, will contain information about the theme through the colors used in our app.', 'start': 5130.183, 'duration': 4.825}, {'end': 5141.234, 'text': "for now, let's simply ignore it and let's add something to the build method, because this method needs to return something,", 'start': 5135.008, 'duration': 6.226}, {'end': 5144.857, 'text': 'which you do by adding the return keyword now.', 'start': 5141.234, 'duration': 3.623}], 'summary': 'Flutter always calls build method on widget objects, taking context as an argument.', 'duration': 57.171, 'max_score': 5087.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc5087686.jpg'}, {'end': 5241.423, 'src': 'embed', 'start': 5214.47, 'weight': 5, 'content': [{'end': 5218.093, 'text': 'because right now we just create the app but there will be nothing to be seen.', 'start': 5214.47, 'duration': 3.623}, {'end': 5221.69, 'text': 'For that, we can pass data to MaterialApp.', 'start': 5219.349, 'duration': 2.341}, {'end': 5223.852, 'text': 'By the way, please notice the parentheses here.', 'start': 5221.931, 'duration': 1.921}, {'end': 5230.536, 'text': 'MaterialApp like this, without the parentheses, is a class imported from the Flutter material package.', 'start': 5224.412, 'duration': 6.124}, {'end': 5235.979, 'text': 'With the parentheses, we create an object based on the class, you could say.', 'start': 5231.356, 'duration': 4.623}, {'end': 5238.061, 'text': 'We construct an object.', 'start': 5236.239, 'duration': 1.822}, {'end': 5241.423, 'text': 'We call this so-called constructor method of a class.', 'start': 5238.101, 'duration': 3.322}], 'summary': 'Pass data to materialapp to create an object based on the class, a constructor method of a class.', 'duration': 26.953, 'max_score': 5214.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc5214470.jpg'}, {'end': 5443.571, 'src': 'embed', 'start': 5402.827, 'weight': 0, 'content': [{'end': 5408.991, 'text': "there is a title argument, and if you're wondering how do i know that this has a title property?", 'start': 5402.827, 'duration': 6.164}, {'end': 5415.415, 'text': 'you can hover over app bar and you will see some documentation on which arguments it accepts,', 'start': 5408.991, 'duration': 6.424}, {'end': 5420.738, 'text': 'and there you see the title and you also see that this also requires a widget.', 'start': 5415.415, 'duration': 5.323}, {'end': 5424.262, 'text': 'But you can also use another approach.', 'start': 5422.281, 'duration': 1.981}, {'end': 5430.045, 'text': 'You can put your cursor into the argument list here between the parentheses and hit control space.', 'start': 5424.522, 'duration': 5.523}, {'end': 5437.368, 'text': 'And then your IDE should give you this auto completion where it offers some, well, code snippets that can be used here.', 'start': 5430.525, 'duration': 6.843}, {'end': 5443.571, 'text': 'And there you also see, if you start typing, that there is a title argument you can target.', 'start': 5437.909, 'duration': 5.662}], 'summary': 'The app bar has a title property, which can be accessed through ide auto-completion.', 'duration': 40.744, 'max_score': 5402.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc5402827.jpg'}, {'end': 5532.188, 'src': 'embed', 'start': 5503.957, 'weight': 2, 'content': [{'end': 5512.785, 'text': 'now, if you write that code like this and you have that trailing comma here at the end after each parentheses set, except for the last one,', 'start': 5503.957, 'duration': 8.828}, {'end': 5517.529, 'text': 'you can use a feature provided by all ides in visual studio code.', 'start': 5512.785, 'duration': 4.744}, {'end': 5525.997, 'text': 'you can find it by going to code preferences, keyboard shortcuts, and then in there search for format document.', 'start': 5517.529, 'duration': 8.468}, {'end': 5532.188, 'text': 'This is a command which you can rebind or use as you find it here,', 'start': 5527.466, 'duration': 4.722}], 'summary': 'Using a trailing comma in code allows for easier formatting in visual studio code.', 'duration': 28.231, 'max_score': 5503.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc5503957.jpg'}], 'start': 4861.07, 'title': 'Flutter widget creation and build method in flutter class', 'summary': 'Introduces creating a widget in flutter, including classes, inheritance, and imports. it also explains the importance of adding a build method to a flutter class for drawing objects onto the screen and provides detailed insights on defining and configuring the build method, material app widget, and scaffold widget.', 'chapters': [{'end': 5045.014, 'start': 4861.07, 'title': 'Flutter widget creation', 'summary': 'Introduces the concept of creating a widget in flutter, including the use of classes, inheritance, and imports to extend features from the flutter framework and draw objects onto the screen.', 'duration': 183.944, 'highlights': ['Classes define how an object should look like and need to extend from a base class to be used as a widget. Classes are used to define the structure of an object and need to extend from a base class, such as StatelessWidget, to be used as a widget in Flutter.', "Inheritance allows a class to inherit features from another class, and importing code from the Flutter framework is done using the 'import' statement. Inheritance in Dart allows a class to inherit features from another class, and code from the Flutter framework is imported using the 'import' statement to access features required for creating widgets.", "The 'stateless widget' is an important feature available in the Flutter framework for creating widgets. The 'stateless widget' is an essential feature in the Flutter framework for creating widgets to be drawn onto the screen."]}, {'end': 5532.188, 'start': 5045.794, 'title': 'Adding build method to flutter class', 'summary': 'Explains the importance of adding a build method to a flutter class, emphasizing that it is essential for drawing objects onto the screen and providing detailed insights on how to define and configure the build method, material app widget, and scaffold widget.', 'duration': 486.394, 'highlights': ['The build method is required because if we tell flutter to use an object based on this class as a widget, it can draw onto the screen. Emphasizes the importance of the build method for drawing objects onto the screen in Flutter.', 'The build method actually takes arguments data which will get passed into it by Flutter, because Flutter will be the one calling the build method. Explains that the build method takes arguments passed by Flutter during its execution.', 'A widget always needs to return another widget in the build method until you reach widgets that ship with flutter. Specifies the rule that a widget must return another widget in the build method until reaching widgets shipped with Flutter.', 'MaterialApp widget is used to wrap the entire app, allowing theming and adding a navigator for switching between different pages. Describes the purpose of the MaterialApp widget as the core root widget for setting up theming and navigation in a Flutter app.', 'Scaffold widget creates a new page with a white background and the ability to add an app bar, requiring configuration by passing data into the constructor. Explains the functionality of the Scaffold widget and the need to configure it by passing data into the constructor.']}], 'duration': 671.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc4861070.jpg', 'highlights': ['Classes define object structure, extend StatelessWidget for use as a widget.', "Inheritance in Dart allows inheriting features, import Flutter code using 'import'.", 'Stateless widget is essential in Flutter for creating screen widgets.', 'Build method crucial for drawing objects onto the screen in Flutter.', 'Build method takes arguments passed by Flutter during execution.', "Widget must return another widget in build method until reaching Flutter's widgets.", 'MaterialApp widget wraps entire app, sets up theming and navigation.', 'Scaffold widget creates new page with white background, adds app bar.']}, {'end': 7230.945, 'segs': [{'end': 6098.419, 'src': 'embed', 'start': 6068.716, 'weight': 0, 'content': [{'end': 6072.561, 'text': 'You also get a short explanation about how it works and what it does.', 'start': 6068.716, 'duration': 3.845}, {'end': 6075.104, 'text': "And therefore, let's add a widget here.", 'start': 6073.242, 'duration': 1.862}, {'end': 6080.249, 'text': 'Now we could again create another widget on our own and then add this here,', 'start': 6075.665, 'duration': 4.584}, {'end': 6086.693, 'text': "but ultimately you'll always end up with a tree of widgets built into the flutter material package.", 'start': 6080.249, 'duration': 6.444}, {'end': 6093.496, 'text': 'your own widgets, which you use a lot, will also well be composed of either other widgets built by you.', 'start': 6086.693, 'duration': 6.803}, {'end': 6098.419, 'text': 'but finally, somewhere at the end of the chain, you will be using widgets shipping with flutter,', 'start': 6093.496, 'duration': 4.923}], 'summary': 'Flutter uses widgets, including ones built by you, and ultimately from flutter material package.', 'duration': 29.703, 'max_score': 6068.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc6068716.jpg'}, {'end': 6463.689, 'src': 'embed', 'start': 6417.352, 'weight': 1, 'content': [{'end': 6422.833, 'text': 'And now we got some body here and hopefully you got more practice with building that widget tree.', 'start': 6417.352, 'duration': 5.481}, {'end': 6428.376, 'text': 'You also learned about some other widgets and whilst you already learned about a lot of new widgets,', 'start': 6423.073, 'duration': 5.303}, {'end': 6435.002, 'text': 'these are all core widgets and there are not that many other core widgets left, as you will learn.', 'start': 6428.376, 'duration': 6.626}, {'end': 6439.706, 'text': "for now, let's reformat the code with that handy shortcut again and let's see what else we can do.", 'start': 6435.002, 'duration': 4.704}, {'end': 6447.763, 'text': 'Are you wondering how I know all these widgets??', 'start': 6444.542, 'duration': 3.221}, {'end': 6452.985, 'text': 'Well, there is an official Flutter documentation which provides an overview.', 'start': 6448.443, 'duration': 4.542}, {'end': 6455.546, 'text': 'On flutter.io.', 'start': 6453.465, 'duration': 2.081}, {'end': 6459.967, 'text': 'you can click on get started, or the look and feel of this page might of course change,', 'start': 6455.546, 'duration': 4.421}, {'end': 6463.689, 'text': 'but you should always find some docs area like with the docs link up here.', 'start': 6459.967, 'duration': 3.722}], 'summary': 'Learning about core widgets in flutter and their abundance in official documentation.', 'duration': 46.337, 'max_score': 6417.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc6417352.jpg'}, {'end': 6566.494, 'src': 'embed', 'start': 6534.667, 'weight': 3, 'content': [{'end': 6541.874, 'text': 'for example, here is that image asset constructor we used, and for some of them not for the image, unfortunately, but for some of them.', 'start': 6534.667, 'duration': 7.207}, {'end': 6549.522, 'text': 'you also see short example snippets here, and even that might look like a lot, but this is a great way of getting to know these widgets,', 'start': 6541.874, 'duration': 7.648}, {'end': 6556.709, 'text': 'to navigate around, and no worries, we will use plenty of them throughout the course so that this will all become much clearer.', 'start': 6549.522, 'duration': 7.187}, {'end': 6566.494, 'text': "Now that you know where to find all these widgets, let's continue working on this app.", 'start': 6561.63, 'duration': 4.864}], 'summary': 'Introducing image asset constructor and example snippets for widgets; will use plenty throughout the course.', 'duration': 31.827, 'max_score': 6534.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc6534667.jpg'}, {'end': 7003.256, 'src': 'embed', 'start': 6973.473, 'weight': 4, 'content': [{'end': 6980.48, 'text': 'And here it tells us that the state object and the state class, by the way, is coming from the flutter material package,', 'start': 6973.473, 'duration': 7.007}, {'end': 6988.506, 'text': 'that this state object will belong to this stateful widget or to a stateful widget in the end,', 'start': 6980.48, 'duration': 8.026}, {'end': 6995.231, 'text': 'because the way you work with state in flutter is that you actually create two classes which will work together,', 'start': 6988.506, 'duration': 6.725}, {'end': 7003.256, 'text': 'and this is kind of the connection create state will return a new state object with a state that is configured to work with a stateful widget.', 'start': 6995.231, 'duration': 8.025}], 'summary': 'State object from flutter material package belongs to stateful widget.', 'duration': 29.783, 'max_score': 6973.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc6973473.jpg'}, {'end': 7165.444, 'src': 'embed', 'start': 7138.724, 'weight': 5, 'content': [{'end': 7142.526, 'text': "For that, let's add something inside of the class definition.", 'start': 7138.724, 'duration': 3.802}, {'end': 7145.929, 'text': "Let's add a property named products.", 'start': 7143.227, 'duration': 2.702}, {'end': 7147.27, 'text': 'The name is up to you though.', 'start': 7146.269, 'duration': 1.001}, {'end': 7153.935, 'text': "Now, products will be a list of, let's say, strings for now, so just a list of text.", 'start': 7148.03, 'duration': 5.905}, {'end': 7160.88, 'text': "Since Dart is a strongly typed language, let's add the type in front of it, and the type is list.", 'start': 7154.776, 'duration': 6.104}, {'end': 7162.902, 'text': 'This is a type shipping with Dart.', 'start': 7161.441, 'duration': 1.461}, {'end': 7165.444, 'text': 'It is what I called an array earlier.', 'start': 7163.282, 'duration': 2.162}], 'summary': "Add a 'products' property to the class as a list of strings in dart.", 'duration': 26.72, 'max_score': 7138.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc7138724.jpg'}], 'start': 5532.188, 'title': 'Flutter app development', 'summary': 'Covers executing runapp function, creating flutter app using dart, implementing stateless and stateful widgets, and configuring core material widgets, emphasizing the importance of key steps and best practices in flutter app development.', 'chapters': [{'end': 5583.444, 'start': 5532.188, 'title': 'Executing runapp function', 'summary': 'Discusses the process of executing the runapp function, which is crucial for mounting a widget to the screen in flutter, and emphasizes the importance of this step in rendering the visual output.', 'duration': 51.256, 'highlights': ['The importance of executing the runApp function to mount a widget to the screen in Flutter is emphasized, which is crucial for rendering the visual output.', 'Emphasizes the significance of running the special function runApp to ensure the proper display of the widget on the screen.', 'The process of creating a widget and using it as an argument for the runApp function is explained, emphasizing its role in rendering the visual elements on the screen.']}, {'end': 5952.82, 'start': 5583.444, 'title': 'Creating flutter app and using dart', 'summary': 'Covers the creation of a basic flutter app using dart, emphasizing the importance of using types to write cleaner code and avoid errors, and discussing the fat arrow notation for writing functions.', 'duration': 369.376, 'highlights': ["Importance of using types in Dart to write cleaner code and avoid errors By defining types for methods and variables in Dart, developers can write cleaner code and avoid errors. For example, by adding the 'widget' word in front of the 'build' method, developers can ensure that the method returns a widget type, preventing potential errors.", 'Discussion of the fat arrow notation for writing functions in Dart The chapter introduces the fat arrow notation as a shorter way of writing functions with a single statement, where the function name and argument list are separated from the function body by using an arrow, an equal sign, and a greater than sign.', 'Explanation of creating a basic Flutter app using Dart and runApp The chapter walks through the process of creating a basic Flutter app using Dart, emphasizing the execution of the main function to construct an object based on a class, and the execution of the classes to create concrete objects.']}, {'end': 6396.229, 'start': 5953.14, 'title': 'Flutter app development', 'summary': 'Covers implementing special methods for stateless widgets, adding components like app bar and card, and using images in the flutter app development, emphasizing the importance of annotations, importing static assets, and utilizing special constructors.', 'duration': 443.089, 'highlights': ['Importance of annotations for method override Explains the significance of the @override annotation for method clarity and improved code readability in a team setting.', 'Adding components like app bar and card Demonstrates the process of adding components such as app bar and card to enhance the visual appeal and functionality of the app.', 'Utilizing special constructors for images Illustrates the use of a special constructor for loading an asset image and the importance of configuring assets in the pubspec.yaml file.']}, {'end': 6779.212, 'start': 6397.168, 'title': 'Flutter widget overview', 'summary': 'Introduces the flutter widget catalog, emphasizing the core material widgets like app bar, buttons, inputs, and containers, and demonstrates the process of creating and configuring widgets, with a focus on building a list of cards and adding a button to the app.', 'duration': 382.044, 'highlights': ['The chapter introduces the Flutter widget catalog, emphasizing the core material widgets like app bar, buttons, inputs, and containers The transcript provides an overview of the core material widgets available in the Flutter widget catalog, emphasizing their importance and relevance to app development.', 'Demonstrates the process of creating and configuring widgets, with a focus on building a list of cards and adding a button to the app The transcript walks through the process of creating and configuring widgets, specifically focusing on building a list of cards using the column widget and adding a button using the raised button widget, along with configuring its properties like onPressed and child.']}, {'end': 7230.945, 'start': 6779.612, 'title': 'Creating stateful widget and managing data', 'summary': "Explains the process of creating a stateful widget and managing data, emphasizing the need to change the widget's state dynamically upon button press, and the implementation of a property named 'products' as a list of strings within the myappstate class.", 'duration': 451.333, 'highlights': ["Implementation of stateful widget for dynamic state change upon button press The chapter emphasizes the need to change the widget's state dynamically upon button press, enabling the creation of new cards below the button by adding more dummy products.", "Explanation of property named 'products' as a list of strings within the MyAppState class The chapter explains the implementation of a property named 'products' as a list of strings within the MyAppState class, with a demonstration of adding an initial item 'food tester' to the list."]}], 'duration': 1698.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc5532188.jpg', 'highlights': ['The process of creating a widget and using it as an argument for the runApp function is crucial for rendering visual elements.', 'Importance of using types in Dart to write cleaner code and avoid errors by defining types for methods and variables.', 'The chapter introduces the fat arrow notation as a shorter way of writing functions with a single statement.', 'Demonstrates the process of adding components such as app bar and card to enhance the visual appeal and functionality of the app.', 'The chapter introduces the Flutter widget catalog, emphasizing the core material widgets like app bar, buttons, inputs, and containers.', 'Implementation of stateful widget for dynamic state change upon button press, enabling the creation of new cards below the button.']}, {'end': 8245.031, 'segs': [{'end': 7683.709, 'src': 'embed', 'start': 7651.779, 'weight': 4, 'content': [{'end': 7654.179, 'text': "Now it's all the time to keep on practicing that.", 'start': 7651.779, 'duration': 2.4}, {'end': 7660.76, 'text': "And one thing you typically do in Flutter apps is you don't put all your code in one root widget,", 'start': 7654.659, 'duration': 6.101}, {'end': 7668.542, 'text': 'like in the stateful widget or its state to be precise, but you split your app into granular pieces, into multiple widgets.', 'start': 7660.76, 'duration': 7.782}, {'end': 7677.564, 'text': 'And you also distribute these across multiple files so that each widget and each file stays readable and maintainable.', 'start': 7668.842, 'duration': 8.722}, {'end': 7683.709, 'text': 'So how can we do that with this widget? Well, we can split it up.', 'start': 7678.604, 'duration': 5.105}], 'summary': 'In flutter apps, code is split into granular widgets and files for readability and maintainability.', 'duration': 31.93, 'max_score': 7651.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc7651779.jpg'}, {'end': 7810.4, 'src': 'embed', 'start': 7781.966, 'weight': 0, 'content': [{'end': 7788.71, 'text': "So just because you imported the Flutter material package here doesn't mean that you don't have to import it here again.", 'start': 7781.966, 'duration': 6.744}, {'end': 7795.415, 'text': "So let's import package colon Flutter slash material dot dart.", 'start': 7789.331, 'duration': 6.084}, {'end': 7798.469, 'text': 'Now we want to create a widget here.', 'start': 7796.607, 'duration': 1.862}, {'end': 7802.072, 'text': 'I simply want to outsource that column logic into this widget.', 'start': 7798.689, 'duration': 3.383}, {'end': 7810.4, 'text': 'The question is, do we extend a state full or a state less widget here? You can build it in both ways.', 'start': 7802.393, 'duration': 8.007}], 'summary': 'Imported flutter material package, created widget for column logic.', 'duration': 28.434, 'max_score': 7781.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc7781966.jpg'}, {'end': 7856.642, 'src': 'embed', 'start': 7828.764, 'weight': 1, 'content': [{'end': 7839.488, 'text': 'The products widget here just receives a list of products and that list might be changed, but it can be changed outside of that products widget here.', 'start': 7828.764, 'duration': 10.724}, {'end': 7841.99, 'text': 'let me show you what i mean.', 'start': 7840.308, 'duration': 1.682}, {'end': 7844.452, 'text': "let's first of all add that build method.", 'start': 7841.99, 'duration': 2.462}, {'end': 7846.313, 'text': "i'll take some ide help here.", 'start': 7844.452, 'duration': 1.861}, {'end': 7856.642, 'text': 'type build, get that auto suggestion and hit enter, and it gives me the entire method and in here i will return my cut code.', 'start': 7846.313, 'duration': 10.329}], 'summary': 'The products widget can receive a list of products and be changed outside of the widget.', 'duration': 27.878, 'max_score': 7828.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc7828764.jpg'}, {'end': 8176.272, 'src': 'embed', 'start': 8148.244, 'weight': 2, 'content': [{'end': 8152.745, 'text': "This is the list which we change with a click of the button still, so this hasn't changed.", 'start': 8148.244, 'duration': 4.501}, {'end': 8156.406, 'text': 'And remove that comma here at the end, reformat.', 'start': 8153.526, 'duration': 2.88}, {'end': 8159.527, 'text': 'This is now our product manager state.', 'start': 8156.866, 'duration': 2.661}, {'end': 8162.083, 'text': 'Now, of course, we should use it.', 'start': 8160.922, 'duration': 1.161}, {'end': 8163.964, 'text': 'We should create it here.', 'start': 8162.423, 'duration': 1.541}, {'end': 8166.986, 'text': 'So return product manager state.', 'start': 8164.664, 'duration': 2.322}, {'end': 8169.728, 'text': 'That already is it.', 'start': 8168.727, 'duration': 1.001}, {'end': 8172.71, 'text': 'This is the product manager stateful widget created.', 'start': 8169.968, 'duration': 2.742}, {'end': 8176.272, 'text': "However, it's of course missing our products widget.", 'start': 8173.01, 'duration': 3.262}], 'summary': 'The transcript discusses creating a product manager state and widget.', 'duration': 28.028, 'max_score': 8148.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc8148244.jpg'}, {'end': 8227.546, 'src': 'embed', 'start': 8201.718, 'weight': 3, 'content': [{'end': 8207.5, 'text': 'but we add another element after our container, and that should be our product widget.', 'start': 8201.718, 'duration': 5.782}, {'end': 8211.3, 'text': 'For it to be usable in this file, we need to import it.', 'start': 8208.42, 'duration': 2.88}, {'end': 8215.762, 'text': "Now it's a good practice to separate that import from package-related imports.", 'start': 8211.741, 'duration': 4.021}, {'end': 8220.284, 'text': 'so separate imports from your own files from the imports pointing at package features.', 'start': 8215.762, 'duration': 4.522}, {'end': 8227.546, 'text': 'So here I will then import, and to import something from your own file, you just add ./.', 'start': 8220.884, 'duration': 6.662}], 'summary': 'Separate imports from package-related imports for better organization and usability.', 'duration': 25.828, 'max_score': 8201.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc8201718.jpg'}], 'start': 7230.945, 'title': 'Managing products in widgets', 'summary': 'Discusses rendering a list of cards on the screen, mapping list elements to cards using the map method in dart, managing stateful widgets in flutter, and managing products in widgets by creating products and product manager widgets.', 'chapters': [{'end': 7278.714, 'start': 7230.945, 'title': 'Rendering list of cards', 'summary': "Discusses rendering a list of cards on the screen by converting the text into a list of such cards, utilizing the 'products' property within the class, and addressing naming conventions for class properties.", 'duration': 47.769, 'highlights': ["Utilize the 'products' property within the class for rendering the list of cards on the screen.", 'Address naming conventions for class properties by adding an underscore at the beginning of the name.', "Explain that in Dart, there's no need to use 'this.products' to reference the property."]}, {'end': 7476.543, 'start': 7279.555, 'title': 'Mapping list elements to cards', 'summary': 'Explains how to use the map method in dart to transform every element in a list into a new element, creating a new list of cards, and then rendering it to the screen, while also addressing the need for converting iterable to widgets and connecting a button to add more elements.', 'duration': 196.988, 'highlights': ['The map method allows transforming every element in the list into a new element and returning it, enabling the creation of a new list of cards. The map method is used to transform every element in a list into a new element, creating a new list of cards.', 'The need to convert an iterable to a list using the toList method to enable its usage. The toList method is used to convert an iterable to a list, allowing it to be used in the code.', 'Explaining the process of connecting a button to add new elements to the products list. The chapter addresses the process of connecting a button to add new elements to the products list.']}, {'end': 7828.224, 'start': 7477.003, 'title': 'Managing stateful widgets in flutter', 'summary': 'Demonstrates the process of managing stateful widgets in flutter, emphasizing the importance of using the set state method to trigger re-rendering and the need to split the app into granular pieces for better maintainability and readability.', 'duration': 351.221, 'highlights': ['The importance of using the set state method to trigger re-rendering The chapter emphasizes the need to use the set state method in Flutter to trigger re-rendering of the app when data is changed, as Flutter does not automatically watch all data fields for changes, ensuring efficient rendering.', 'Splitting the app into granular pieces for better maintainability and readability The chapter discusses the importance of splitting the app into multiple widgets and distributing them across multiple files to ensure each widget and file remains readable and maintainable, enhancing the overall organization and structure of the app.', 'Demonstrating the process of managing stateful widgets in Flutter The chapter demonstrates the process of managing stateful widgets in Flutter, detailing the need to effectively manage the state of widgets and the process of separating the stateful widget into granular pieces for better app organization.']}, {'end': 8245.031, 'start': 7828.764, 'title': 'Managing products in widgets', 'summary': 'Explains how to manage products in widgets by creating a products widget and a product manager widget, utilizing constructors, properties, and stateful widgets in dart and flutter.', 'duration': 416.267, 'highlights': ['The chapter explains how to create a products widget to receive a list of products and utilize a constructor to pass the data into the widget. Creation of products widget, utilization of constructor to pass data', "The chapter discusses the utilization of properties and the 'final' keyword to make the products property immutable and unchangeable in a stateless widget. Utilization of properties, making products property immutable with 'final' keyword", 'The chapter demonstrates the creation of a product manager widget to manage the list of products and explains the usage of stateful widgets in Dart and Flutter. Creation of product manager widget, usage of stateful widgets']}], 'duration': 1014.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc7230945.jpg', 'highlights': ["Utilize the 'products' property within the class for rendering the list of cards on the screen.", 'The map method allows transforming every element in the list into a new element and returning it, enabling the creation of a new list of cards.', 'The importance of using the set state method to trigger re-rendering.', 'Splitting the app into granular pieces for better maintainability and readability.', 'The chapter explains how to create a products widget to receive a list of products and utilize a constructor to pass the data into the widget.']}, {'end': 10143.806, 'segs': [{'end': 8501.81, 'src': 'heatmap', 'start': 8367.808, 'weight': 0.73, 'content': [{'end': 8376.416, 'text': 'You build user interfaces with these widgets, with these user interface components and you want to split them up across multiple files.', 'start': 8367.808, 'duration': 8.608}, {'end': 8379.939, 'text': 'You want to work with stateless and stateful widgets,', 'start': 8376.857, 'duration': 3.082}, {'end': 8389.626, 'text': 'use as many stateless widgets as possible and have a few selected stateful widgets which actually manage your data and change the data,', 'start': 8379.939, 'duration': 9.687}, {'end': 8391.988, 'text': 'like our product manager does in this case.', 'start': 8389.626, 'duration': 2.362}, {'end': 8401.841, 'text': "We spent a lot of work on building these widgets and we're almost done with the core basics.", 'start': 8396.636, 'duration': 5.205}, {'end': 8404.063, 'text': 'There are two more things I want to dive into.', 'start': 8402.201, 'duration': 1.862}, {'end': 8414.212, 'text': 'And one of them is what if our stateful widget also wants to receive some data from outside? Let me give you a concrete example.', 'start': 8404.543, 'duration': 9.669}, {'end': 8418.315, 'text': "We got the food tester product we're starting with in the product manager.", 'start': 8414.632, 'duration': 3.683}, {'end': 8420.537, 'text': 'Now, of course, we can set it up like this.', 'start': 8418.776, 'duration': 1.761}, {'end': 8423.079, 'text': "It's just some dummy hard coded code anyways.", 'start': 8420.817, 'duration': 2.262}, {'end': 8427.161, 'text': "But let's say we actually don't want to start with it,", 'start': 8423.72, 'duration': 3.441}, {'end': 8434.324, 'text': 'but we want to get that starting data from outside because we want to define our initial set of products.', 'start': 8427.161, 'duration': 7.163}, {'end': 8436.485, 'text': "we're starting in the main.dart file.", 'start': 8434.324, 'duration': 2.161}, {'end': 8442.027, 'text': 'Maybe because we fetched it from a server here and we will do all these things throughout the course.', 'start': 8436.965, 'duration': 5.062}, {'end': 8443.968, 'text': "We'll reach out to a backend and so on.", 'start': 8442.208, 'duration': 1.76}, {'end': 8450.091, 'text': 'So we want to send that data into the product manager from inside our main.dart file.', 'start': 8444.769, 'duration': 5.322}, {'end': 8453.432, 'text': 'we learned how we can pass data down.', 'start': 8450.991, 'duration': 2.441}, {'end': 8455.413, 'text': 'we can pass it as an argument,', 'start': 8453.432, 'duration': 1.981}, {'end': 8463.097, 'text': 'like we pass products to our product widget and we accept it in the receiving widget by adding the constructor function,', 'start': 8455.413, 'duration': 7.684}, {'end': 8466.607, 'text': 'And we can also do that with the product manager here.', 'start': 8463.885, 'duration': 2.722}, {'end': 8473.251, 'text': "The product manager, and here it's important that you use the class that extends stateful widget, not the state,", 'start': 8467.427, 'duration': 5.824}, {'end': 8476.092, 'text': 'but this one is the class you use in your widget right?', 'start': 8473.251, 'duration': 2.841}, {'end': 8477.853, 'text': 'Here we use product manager.', 'start': 8476.353, 'duration': 1.5}, {'end': 8484.217, 'text': 'So that you use this, and there you add a constructor by repeating the class name and adding parentheses.', 'start': 8478.794, 'duration': 5.423}, {'end': 8489.38, 'text': 'Now, this constructor here should now be able to receive an argument.', 'start': 8485.038, 'duration': 4.342}, {'end': 8493.303, 'text': "In our case, the starting product, let's say.", 'start': 8490.021, 'duration': 3.282}, {'end': 8501.81, 'text': 'Now I want to store that and I will store it in a property, which is of type string starting product.', 'start': 8494.508, 'duration': 7.302}], 'summary': 'Building user interfaces with stateless and stateful widgets, managing data, and passing external data to widgets.', 'duration': 134.002, 'max_score': 8367.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc8367808.jpg'}, {'end': 8845.474, 'src': 'embed', 'start': 8819.881, 'weight': 2, 'content': [{'end': 8826.884, 'text': 'Before we now move on and also learn how we can debug Flutter apps and finally then also fix our broken list here.', 'start': 8819.881, 'duration': 7.003}, {'end': 8831.387, 'text': 'before we do that, let me quickly show you these lifecycle hooks I was referring to you.', 'start': 8826.884, 'duration': 4.503}, {'end': 8837.81, 'text': "It's first of all important that there are stateless and stateful widgets and that there is a difference of course.", 'start': 8832.047, 'duration': 5.763}, {'end': 8845.474, 'text': 'Stateless widgets, are used to create a widget where you render something to the UI and you can pass data into them.', 'start': 8838.39, 'duration': 7.084}], 'summary': 'Learn about debugging flutter apps and stateless/stateful widgets.', 'duration': 25.593, 'max_score': 8819.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc8819881.jpg'}, {'end': 9301.752, 'src': 'embed', 'start': 9278.311, 'weight': 3, 'content': [{'end': 9287.1, 'text': 'it will draw to the old one and only change the parts that need to be changed to make sure that this is done in a very performance, efficient way.', 'start': 9278.311, 'duration': 8.789}, {'end': 9290.443, 'text': 'This is the lifecycle you should understand.', 'start': 9288.081, 'duration': 2.362}, {'end': 9294.546, 'text': "Now, there's one extra thing I want to show you as part of that lifecycle.", 'start': 9291.044, 'duration': 3.502}, {'end': 9301.752, 'text': 'In the product manager state here, you can also add the did update widget method.', 'start': 9295.307, 'duration': 6.445}], 'summary': 'Efficiently updating the old product with minimal changes in the lifecycle, including the did update widget method.', 'duration': 23.441, 'max_score': 9278.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc9278311.jpg'}, {'end': 10038.959, 'src': 'embed', 'start': 9966.386, 'weight': 0, 'content': [{'end': 9970.529, 'text': 'And throughout the course, we will build more and more methods and also use these features.', 'start': 9966.386, 'duration': 4.143}, {'end': 9973.671, 'text': "I just want you to know what's happening behind the scenes here.", 'start': 9970.989, 'duration': 2.682}, {'end': 9980.112, 'text': 'So that were some additional Dart features which I felt important to be mentioned at this point.', 'start': 9974.672, 'duration': 5.44}, {'end': 9990.201, 'text': 'And whilst I do try my best to cover a lot of the Dart features which we use here and explain them, if you want to learn everything about Dart,', 'start': 9981.536, 'duration': 8.665}, {'end': 9992.422, 'text': 'also visit dartlang.org.', 'start': 9990.201, 'duration': 2.221}, {'end': 9994.583, 'text': "That's the official Dart language page.", 'start': 9992.762, 'duration': 1.821}, {'end': 10003.187, 'text': 'And there you can, for example, take the language tour to get a detailed overview over everything you need to know about Dart, how it works,', 'start': 9994.823, 'duration': 8.364}, {'end': 10012.198, 'text': 'which keywords it has, how you create variables, what this difference between final and const is, how you create classes, what generics are,', 'start': 10003.187, 'duration': 9.011}, {'end': 10012.799, 'text': 'and so on.', 'start': 10012.198, 'duration': 0.601}, {'end': 10016.083, 'text': 'So check out this page if you want to learn everything about Dart.', 'start': 10013.2, 'duration': 2.883}, {'end': 10022.272, 'text': 'But again, I will reiterate and explain the core concepts we are using when we are using them.', 'start': 10016.384, 'duration': 5.888}, {'end': 10031.634, 'text': 'In this module, we learned so much about the widgets and the basics of a flood wrap.', 'start': 10027.031, 'duration': 4.603}, {'end': 10034.696, 'text': "It's certainly a lot of information to digest.", 'start': 10032.375, 'duration': 2.321}, {'end': 10038.959, 'text': 'So definitely go back and forth and reiterate through the concepts here.', 'start': 10034.977, 'duration': 3.982}], 'summary': 'Learn dart features and basics of flutter. visit dartlang.org for detailed overview.', 'duration': 72.573, 'max_score': 9966.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc9966386.jpg'}], 'start': 8245.432, 'title': 'Implementing product manager, structuring flutter apps, lifecycle, and material design', 'summary': 'Discusses implementing a product manager, structuring flutter apps with reusable widgets, exploring the flutter app lifecycle, and implementing material design with insights into theme customization and color management.', 'chapters': [{'end': 8349.915, 'start': 8245.432, 'title': 'Implementing product manager', 'summary': 'Discusses implementing a product manager in dart file, converting a stateful widget to a stateless widget, and re-rendering products on state change.', 'duration': 104.483, 'highlights': ['The chapter discusses implementing a product manager in Dart file, converting a stateful widget to a stateless widget, and re-rendering products on state change.', 'The product manager is implemented to handle the state of products and re-render when the state changes.', 'Stateful widget in the main.dart file is converted to a stateless widget, removing the create state method and myAppState class.']}, {'end': 8766.296, 'start': 8349.915, 'title': 'Structuring flutter apps with widgets', 'summary': "Discusses structuring flutter apps with multiple reusable widgets, emphasizing the use of stateless and selected stateful widgets, passing data to stateful widgets, and utilizing the 'widget' property to access parent widget properties.", 'duration': 416.381, 'highlights': ['The chapter discusses structuring Flutter apps with multiple reusable widgets The transcript emphasizes the importance of structuring Flutter apps with multiple reusable widgets, which makes the code easier to manage and understand.', 'Emphasizes the use of stateless and selected stateful widgets The chapter highlights the preference for using stateless widgets and a few selected stateful widgets for data management.', 'Passing data to stateful widgets The transcript explains the process of passing data to a stateful widget using a constructor function, allowing for external data to be received and managed.', "Utilizing the 'widget' property to access parent widget properties The transcript demonstrates the use of the 'widget' property provided by the state class to access the properties of the parent widget, facilitating access to connected stateful widget properties."]}, {'end': 9373.39, 'start': 8766.296, 'title': 'Flutter app lifecycle', 'summary': 'Explores the lifecycle of stateless and stateful widgets, emphasizing the methods executed by flutter and the impact of external and internal state changes on ui re-rendering, with an emphasis on the efficiency of ui updates and the addition of the didupdatewidget method.', 'duration': 607.094, 'highlights': ['The initState method runs before the build method in a stateful widget, eliminating the need to call setState when changing the state, ensuring efficient UI rendering.', 'Stateless and stateful widgets differ in their lifecycle methods; the former only includes the constructor and the build method, while the latter also features initState before the first build, with the option to call setState to trigger UI updates.', 'The UI of a stateless widget gets re-rendered when the input data changes, while both external data changes and internal state changes lead to UI re-rendering in a stateful widget, showcasing the impact of data changes on UI updates.', 'Flutter ensures efficient UI updates by comparing the new and updated UI to the old one, only changing the necessary parts, demonstrating the performance efficiency of UI rendering.', 'The didUpdateWidget method in a stateful widget is executed when the connected widget receives new external data, with the provision of accessing the old widget data for comparison, illustrating the handling of updated external data.']}, {'end': 9617.223, 'start': 9373.75, 'title': 'Material design in flutter', 'summary': 'Discusses the implementation of material design in flutter, emphasizing its flexibility and customizability, and provides insights into theme customization and color management, offering practical examples and demonstrations.', 'duration': 243.473, 'highlights': ["Material Design is Google's design system for mobile, web, and desktop applications, embraced by Google and customizable for different platforms. Material Design is a design system with guides, best practices, and color combinations for mobile, web, and desktop apps, embraced by Google but also customizable for different platforms.", 'Implementation of theme customization in Flutter, demonstrated with practical examples using theme data and color management for app components. Demonstrates the implementation of theme customization in Flutter using theme data and color management for app components, with practical examples.', "Integration of material design in Flutter, showcasing the flexibility to adjust the app's appearance without extensive design work. Integration of material design in Flutter allows adjusting the app's appearance without extensive design work, showcasing its flexibility."]}, {'end': 10143.806, 'start': 9617.984, 'title': 'Material design and dart features', 'summary': 'Covers the use of deep purple color in the app, adjusting brightness, material design, static properties in dart, and using named arguments. the assignment requires creating a new flutter app, adding a button to change text, and splitting the app into three widgets.', 'duration': 525.822, 'highlights': ['The chapter covers the use of deep purple color in the app and adjusting brightness, with the default being all right. Deep purple color is used throughout the course, with an option to adjust the brightness, but the default setting is suitable.', 'Exploration of material design and adjusting it to resemble iOS with less drop shadows is mentioned for a dedicated module later in the course. Material design is explored, and there is a mention of adjusting it to resemble iOS with less drop shadows in a dedicated module later in the course.', 'Explanation of static properties in Dart and how to define them, with an example of importing colors without instantiating the class. Static properties in Dart are explained, with a demonstration of importing colors without instantiating the class and defining static properties using the static keyword.', 'Use of named arguments is demonstrated, with examples of setting named arguments and creating optional arguments for both positional and named arguments. Named arguments are used and demonstrated, along with creating optional arguments for both positional and named arguments.', 'The assignment requires creating a new Flutter app, adding a button to change text, and splitting the app into three widgets as a practice of concepts covered in the module. The assignment involves creating a new Flutter app, adding a button to change text, and splitting the app into three widgets as a practice of concepts covered in the module.']}], 'duration': 1898.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc8245432.jpg', 'highlights': ['Exploration of material design and adjusting it to resemble iOS with less drop shadows is mentioned for a dedicated module later in the course.', 'Demonstrates the implementation of theme customization in Flutter using theme data and color management for app components, with practical examples.', 'The chapter discusses implementing a product manager in Dart file, converting a stateful widget to a stateless widget, and re-rendering products on state change.', 'The initState method runs before the build method in a stateful widget, eliminating the need to call setState when changing the state, ensuring efficient UI rendering.', "Integration of material design in Flutter allows adjusting the app's appearance without extensive design work, showcasing its flexibility."]}, {'end': 12119.851, 'segs': [{'end': 10549.368, 'src': 'embed', 'start': 10523.275, 'weight': 4, 'content': [{'end': 10528.038, 'text': 'In this text, I will not output a string, or I will output one, but not with quotation marks.', 'start': 10523.275, 'duration': 4.763}, {'end': 10533.162, 'text': 'Instead, I will refer to the main text property, which of course is this string.', 'start': 10528.258, 'duration': 4.904}, {'end': 10538.944, 'text': 'And now we can change it when we click the button there, we can call set state.', 'start': 10534.022, 'duration': 4.922}, {'end': 10539.884, 'text': "That's important.", 'start': 10539.084, 'duration': 0.8}, {'end': 10542.205, 'text': 'Otherwise the UI will not rebuild.', 'start': 10540.144, 'duration': 2.061}, {'end': 10549.368, 'text': 'And then in there, I said main text equal to this changed.', 'start': 10543.046, 'duration': 6.322}], 'summary': 'Explains how to modify text property using set state for ui rebuild.', 'duration': 26.093, 'max_score': 10523.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc10523275.jpg'}, {'end': 10603.085, 'src': 'embed', 'start': 10573.533, 'weight': 1, 'content': [{'end': 10577.435, 'text': "And since that content got shorter, well, it's further to the left.", 'start': 10573.533, 'duration': 3.902}, {'end': 10588.715, 'text': "this is now our button, changing the text only once, or actually it will reset it to this change, but we don't see that change of course.", 'start': 10578.476, 'duration': 10.239}, {'end': 10591.24, 'text': 'and that is task number two solved already.', 'start': 10588.715, 'duration': 2.525}, {'end': 10596.52, 'text': "Let's move on to task number three, and this is a bit of a redundant task.", 'start': 10592.717, 'duration': 3.803}, {'end': 10603.085, 'text': "It would be perfectly fine to keep that all in one widget, but to practice that, we'll split it up into three.", 'start': 10596.82, 'duration': 6.265}], 'summary': 'Content got shorter, button changes text once, task 2 solved, splitting task 3.', 'duration': 29.552, 'max_score': 10573.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc10573533.jpg'}, {'end': 10656.575, 'src': 'embed', 'start': 10624.062, 'weight': 2, 'content': [{'end': 10626.864, 'text': "So to not clash with the names, I'll use a different one.", 'start': 10624.062, 'duration': 2.802}, {'end': 10633.33, 'text': "And now let's go back to main dart and let's grab the column here.", 'start': 10628.486, 'duration': 4.844}, {'end': 10637.722, 'text': 'in our body of that scaffold.', 'start': 10636.201, 'duration': 1.521}, {'end': 10640.344, 'text': "Let's put it into the text control.", 'start': 10638.423, 'duration': 1.921}, {'end': 10647.449, 'text': 'There we first of all need to import from the flutter package from the material dart file there.', 'start': 10640.944, 'duration': 6.505}, {'end': 10656.575, 'text': 'Then we create a class text control, which will extend a state full widget here because I want to manage my text in there.', 'start': 10648.089, 'duration': 8.486}], 'summary': "In the flutter app, a class 'textcontrol' manages text using a stateful widget.", 'duration': 32.513, 'max_score': 10624.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc10624062.jpg'}, {'end': 10702.051, 'src': 'embed', 'start': 10676.54, 'weight': 0, 'content': [{'end': 10685.263, 'text': 'And in the build method, well, there we will return what I just cut from the main Dart file, this column where we have the button and the text.', 'start': 10676.54, 'duration': 8.723}, {'end': 10687.603, 'text': 'Now the main text property is missing.', 'start': 10685.823, 'duration': 1.78}, {'end': 10689.464, 'text': 'We can use that from main Dart too.', 'start': 10687.764, 'duration': 1.7}, {'end': 10695.846, 'text': "So there let's copy or cut the main text, move it into the text control state like this.", 'start': 10690.044, 'duration': 5.802}, {'end': 10697.767, 'text': 'And now this is working again.', 'start': 10696.466, 'duration': 1.301}, {'end': 10702.051, 'text': 'Up there, text control, that is also almost looking great.', 'start': 10699.068, 'duration': 2.983}], 'summary': 'The build method returned the button and text, text property was missing, then copied to text control state.', 'duration': 25.511, 'max_score': 10676.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc10676540.jpg'}, {'end': 11624.028, 'src': 'embed', 'start': 11592.747, 'weight': 3, 'content': [{'end': 11599.032, 'text': 'And therefore, of course, you would fail if you say product is now an array with one string.', 'start': 11592.747, 'duration': 6.285}, {'end': 11600.973, 'text': 'This would be a valid list.', 'start': 11599.392, 'duration': 1.581}, {'end': 11604.335, 'text': 'It holds a string and product should be a list of strings.', 'start': 11601.173, 'duration': 3.162}, {'end': 11607.437, 'text': 'But we get the same error as for the age.', 'start': 11604.915, 'duration': 2.522}, {'end': 11609.899, 'text': "We can't do that because it's final.", 'start': 11607.757, 'duration': 2.142}, {'end': 11615.442, 'text': 'So assigning new values which requires the equal sign is not possible.', 'start': 11610.259, 'duration': 5.183}, {'end': 11624.028, 'text': 'Changing the existing value is possible because lists and objects in general are reference types,', 'start': 11616.023, 'duration': 8.005}], 'summary': 'Error occurs when trying to assign new values to final list or object.', 'duration': 31.281, 'max_score': 11592.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc11592747.jpg'}], 'start': 10144.667, 'title': 'Flutter app development', 'summary': 'Covers creating the first flutter app, adding a button to change text, widget management, state and data management, and basics of flutter and dart, emphasizing the importance of widgets and stateful vs stateless widgets, and providing practical examples for app development.', 'chapters': [{'end': 10366.644, 'start': 10144.667, 'title': 'Creating first flutter app', 'summary': 'Covers creating the first flutter app, including importing necessary packages, defining a root widget, adding app bar and text, and using the main method to display the app, emphasizing the importance of run app and potential need for full restart.', 'duration': 221.977, 'highlights': ['The chapter emphasizes importing the flutter material package as it contains everything typically needed for the app, including defining a root widget and extending it as a stateless or stateful widget.', 'It explains the process of adding an app bar and text using the scaffold widget, with a focus on using the center widget to align the text horizontally and vertically.', 'The chapter highlights the importance of adding the main method and using run app to display the app, emphasizing the need for a potential full restart to see the changes reflected on the emulator.']}, {'end': 10596.52, 'start': 10368.188, 'title': 'Adding button to change text', 'summary': 'Discusses adding a button to change text in a flutter app, converting a stateless widget to a stateful one, and using set state to update the ui with the changed text, ultimately solving task number two.', 'duration': 228.332, 'highlights': ['The chapter discusses adding a button to change text in a Flutter app It explains the process of adding a button widget and handling its onPressed function to change the displayed text.', 'Converting a stateless widget to a stateful one It outlines the need to convert the stateless widget to a stateful widget in order to modify the UI based on user interactions.', 'Using set state to update the UI with the changed text It emphasizes the use of set state to trigger a UI rebuild when the text is changed, ensuring the updated text is reflected on the screen.']}, {'end': 10990.037, 'start': 10596.82, 'title': 'Flutter widget management', 'summary': 'Covers splitting widgets into smaller components, importing and using different widgets, and practicing passing data around. it also emphasizes the basic setup for widget management and hints at advanced examples for widget usage.', 'duration': 393.217, 'highlights': ['The chapter covers splitting widgets into smaller components and practicing passing data around. Splitting widgets into smaller components, practicing passing data around', 'Importing and using different widgets, such as text control and text output, is demonstrated. Importing and using different widgets, demonstration of text control and text output', 'The basics of widget management are emphasized, preparing for more advanced examples of widget usage. Emphasis on basic setup for widget management, preparation for advanced widget examples']}, {'end': 11802.129, 'start': 10990.037, 'title': 'Managing state and passing data in flutter', 'summary': 'Covers managing state and passing data in flutter, including the concept of lifting state up, passing references to functions, and understanding the final and const keywords in dart.', 'duration': 812.092, 'highlights': ['The concept of lifting state up emphasizes managing the state in a widget that has access to all the widgets that either change it or require the widget state and data. The product manager serves as the connecting widget between the product control and the products, demonstrating the concept of lifting state up.', "Passing references to functions allows another widget to access a method in the parent widget, enabling the passing of data up the widget hierarchy. By passing the reference to the 'add product' function from the product manager to the product control, the ability to add products from a button in a different widget is demonstrated.", "The final and const keywords in Dart serve to indicate immutability, with 'final' preventing the reassignment of a property value and 'const' ensuring that a value is constant and unchangeable. Understanding the difference between 'final' and 'const' in Dart, and their impact on immutability and preventing modifications to properties."]}, {'end': 12119.851, 'start': 11807.119, 'title': 'Basics of flutter & dart', 'summary': 'Covers the basics of flutter, emphasizing that flutter is all about widgets and how they are used to compose the user interface, along with the role of dart as the programming language. it also explains the importance of stateless and stateful widgets, the widget lifecycle, and data passing between widgets.', 'duration': 312.732, 'highlights': ['Flutter is all about widgets The chapter emphasizes that Flutter is all about widgets and how they are used to compose the user interface.', 'Stateless and stateful widgets The chapter explains the difference between stateless and stateful widgets and how they handle data and re-render cycles.', 'Role of Dart in Flutter It is explained that Dart is the programming language used by Flutter, and it is an object-oriented language with static typing.', 'Widget lifecycle and data passing The chapter covers the widget lifecycle and data passing between widgets, including the use of constructor methods and lifecycle methods.']}], 'duration': 1975.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GLSG_Wh_YWc/pics/GLSG_Wh_YWc10144667.jpg', 'highlights': ['The chapter emphasizes importing the flutter material package as it contains everything typically needed for the app, including defining a root widget and extending it as a stateless or stateful widget.', 'The chapter discusses adding a button to change text in a Flutter app It explains the process of adding a button widget and handling its onPressed function to change the displayed text.', 'The chapter covers splitting widgets into smaller components and practicing passing data around. Splitting widgets into smaller components, practicing passing data around', 'The concept of lifting state up emphasizes managing the state in a widget that has access to all the widgets that either change it or require the widget state and data. The product manager serves as the connecting widget between the product control and the products, demonstrating the concept of lifting state up.', 'Flutter is all about widgets The chapter emphasizes that Flutter is all about widgets and how they are used to compose the user interface.']}], 'highlights': ['Developers can write code in Dart and utilize the features of the Flutter framework to build native apps, eliminating the need to learn multiple languages such as Java or Swift.', "Flutter offers tools for testing apps on devices with features like auto reload, enhancing the development process's efficiency and convenience.", 'Flutter compiles Dart code to native code for Android and iOS platforms using the Flutter SDK and its utility features.', 'The installation process for Flutter differs between Mac OS and Windows, with specific setup steps provided for each platform.', "Running 'Flutter doctor' is used to check if the Flutter installation is set up correctly and to identify any additional requirements.", 'Installing and running an Android virtual device for Flutter', 'Utilizing hot reload for faster development', 'The process of updating the path variable is explained in detail, including accessing the control panel, navigating to user accounts, and adding the path to the Flutter bin subfolder.', "Running 'flutter console.bat' opens a command prompt with Flutter, enabling the execution of Flutter commands and building apps.", 'Keeping the flutter run process running allows for hot reload, enabling changes to be pushed into the app without the need for it to rebuild, enhancing the development process.', 'Overview of the core features of Flutter, such as material design, its flexibility for customization, and embracing material design for both Android and iOS, with an emphasis on adjusting it to specific requirements.', 'Usage of built-in widgets, organization, and creation of custom widgets', 'Classes define object structure, extend StatelessWidget for use as a widget.', "Inheritance in Dart allows inheriting features, import Flutter code using 'import'.", 'Stateless widget is essential in Flutter for creating screen widgets.', 'The process of creating a widget and using it as an argument for the runApp function is crucial for rendering visual elements.', "Utilize the 'products' property within the class for rendering the list of cards on the screen.", 'Exploration of material design and adjusting it to resemble iOS with less drop shadows is mentioned for a dedicated module later in the course.', 'The chapter emphasizes importing the flutter material package as it contains everything typically needed for the app, including defining a root widget and extending it as a stateless or stateful widget.', 'The chapter discusses adding a button to change text in a Flutter app It explains the process of adding a button widget and handling its onPressed function to change the displayed text.', 'The concept of lifting state up emphasizes managing the state in a widget that has access to all the widgets that either change it or require the widget state and data. The product manager serves as the connecting widget between the product control and the products, demonstrating the concept of lifting state up.']}