Dark & Light Theme with BLoC Flutter

hey everyone welcome back to another exciting video I hope you all are doing great today we will learn how to implement dark and light themes in flutter using blog State Management so without wasting any more time let's dive right into it we will start with this default counter application that comes with flutter but before we begin make sure to add the block dependencies you can either do it through the vs code shortcut that comes with the paper extension or directly add it in the pop stack.tml file and then run better type command to get all the documents thank you now that we have the dependency let's create a theme blog to manage the state changes add the theme and change it dynamically you can use this vs code extension to make your task easier and create a new block so let's name this block theme block now there are two approaches to use here either you can store the current theme data in the state object or you can directly use theme mode as a state in the clock so I will choose the later as it seems more clean let's do theme mode path light as the initial state to the block so by default the live theme will be applied now let's create an event for theme change here we will use a Boolean variable is start to know which theme to show whenever a user request to change the theme in the block we will listen to this theme change event if Stark variable is true we will emit the state theme mode.dark otherwise we will emit theme mode.light with the block work completed let's create two themes for our application for this I will create a new file name theme Dot [Music] in this file we will Define two theme data objects one for lighting and another for acting you can either use an existing theme or generate a new color scheme for your application using this material theme once the theme is ready export it in flutter open the generated chip and copy the color scheme from the color scheme and paste them into our theme type now add the light colored skin to the light theme under dark colored skin to the bathroom with our light and dark themes ready to use we will pass them in the material app widget [Music] to use the theme block we need to add a block provider so let's add a block provider wizard at top of material app with the theme lab [Music] next we will need to tell the material at which theme to display either the Dark theme or the light theme so we can use the three mode parameter for this if we pass theme mode.light the light thing will be used and if it has three more Broadband then the start theme will be used but we need to give this mode dynamically from the theme state to do this let's wrap this widget in a block Builder so whenever the state changes the widget will be rebuilt with the changed theme alternatively you can use context or watch method which is provided by blog if you don't want to wrap it in a block Builder now we can use the state variable and pass it into the theme mode since we have given the initial State as 3 mole per flight in the block we are currently seeing the light theme but if we give the initial State as theme mode dot Dart you will see the Dark theme Here finally let's add a switch widget to let user switch to theme if this switch is on then the theme will be dark and if it's off then theme will be lighting you can also swipe the direction of switch and theme if you prefer if the state is theme mode. then the value of the switch will be true as the value will be false and in the on change callback we will trigger the theme change event with the value we got from the switch and that's it we have successfully implemented dark and light themes in flutter using block State Management you can get the source code of this tutorial in the link given Below in the description I hope you enjoyed this video if you have any doubts or suggestion feel free to comment down below also feel free to ask any questions about flutter in the comment section below and if you want more content related to flickers you can also follow me on Instagram and medium whose link are given Below in the description thank you for watching

Channel: Flutter Tricks

Views: 1,417

Keywords: flutter, bloc, android, google, web, ios, linux, macos, flutter development, state management, proider, light, dark, theme

Id: QwlKCHahfTs

Length: 6min 0sec (360 seconds)

Published: Tue Aug 01 2023