Flutter Tutorial - App Settings Page UI

Flutter Tutorial - App Settings Page UI | Flutter Settings Screen

Рет қаралды 41,640

Күн бұрын

Create a Flutter Settings Page UI that uses Shared Preferences to store the app settings in Flutter.
Click here to Subscribe to Johannes Milke: kzfaq.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/sett...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Settings Menu Tutorial: • Flutter Tutorial - Dyn...
Internet Connectivity Tutorial: • Flutter Tutorial - How...
User Profile Page & Shared Preferences Tutorial: • Flutter Tutorial - Use...
User Profile Page UI Tutorial: • Flutter Tutorial - Use...
Navigation Drawer UI Tutorial: • Flutter Tutorial - Sid...
Upload File To Firebase Storage Tutorial: • Flutter Tutorial - Upl...
Download File From Firebase Storage Tutorial: • Flutter Tutorial - Dow...
TextField Autofill Services Tutorial: • Flutter Tutorial - Aut...
Page Transition Animation Tutorial: • Flutter Tutorial - Pag...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
JSON Serializable Tutorial: • Flutter Tutorial - Con...
Audio Player App Tutorial: • Flutter Tutorial - Mak...
Hidden Drawer UI Tutorial: • Flutter Tutorial - Hid...
Set Screen Background Color Tutorial: • Flutter Tutorial - Set...
Set Screen Background Image Tutorial: • Flutter Tutorial - Set...
Animated List Tutorial: • Flutter Tutorial - Ani...
Calendar Event App Tutorial: • Flutter Tutorial - Cal...
TIMELINE
0:00 Introduction App Settings Page UI
0:25 Setting Screen ListTiles
0:42 Switch SettingsTile
1:01 Simple SettingsTile
1:19 DropDown SettingsTile
1:39 TextInput SettingsTile
2:02 Create Settings Page UI
3:27 Navigate To Another Settings Page UI
4:30 Add Language, Location, Password To Settings
4:49 Add Settings Shared Preferences
6:54 Add Dark Mode Switch With Dark Theme Provider
9:33 Add Notification Settings
10:28 Clear Settings Cache Of Shared Preferences
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

Пікірлер: 78

@HeyFlutter Жыл бұрын

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/settings_screen_example

@samengsberg875 2 жыл бұрын

What a joy to be thinking of a setting screen page, pull this up, and immediately see there's an easier way to do things. Thanks for these videos.

@zcouldmusic 2 жыл бұрын

Ta chaîne est un paradis flutter Bro, merci infiniment pour tout ce que continue à fournir comme tutoriels 🙏🙏🙏🙏🤩

@dantedt3931 2 жыл бұрын

Probably the best Flutter channel on KZfaq. You deserve a million views.

@ChetanSingh-zp4ct 3 жыл бұрын

Ah man you are everything that a Flutter dev needs

@miguelfinanzasycripto 3 жыл бұрын

hahaha it is true🤣👍

@hafizibrohim599 2 жыл бұрын

Very very useful information, thanks Johannes

@TrikNgonlen 3 жыл бұрын

I love it...thanks @Johannes Milke

@kwameg1776 2 жыл бұрын

The best channel for flutter lessons.

@TheWhoIsTom 3 жыл бұрын

awesome like always!

@dr.thantphyoaung 2 жыл бұрын

I love to hear your voice while frustrating with flutter

@botsheloramela5728 2 жыл бұрын

Hi Johannes, thank you for the awesome video... I'm having a bit of trouble with the SimpleSettingsTile, I get a white background on them, how can I remove it?

@abdoudouba2889 3 жыл бұрын

cause of you i learned many things . when my i reach my dreams i will search for u and thank u in the real life

@hashankannangara8723 3 жыл бұрын

Thanks 😍🤘

@eldadario7339 3 жыл бұрын

Very good

@HassanMonaco381 2 жыл бұрын

Im having trouble with initialising the cacheprovider. SharePreferenceCache is not working for me. Any ideas on how to fix it? Arguments of a constant creation must be constant expressions. (Documentation) Try making the argument a valid constant, or use 'new' to call the constructor. Too many positional arguments: 0 expected, but 1 found. (Documentation) Try removing the extra positional arguments, or specifying the name for named arguments. These are the errors its getting...

@eldadario7339 3 жыл бұрын

Hey Johannes, how to use a ValueNotifier and ValueListenableBulder?

@kibromhs7566 2 жыл бұрын

I was worried how I build the settings for my app. I'm happy now☺️

@iAnguel 2 жыл бұрын

Nice, I wonder if this can be easily modified to retrieve/save the settings to a network.

@sivaKumar-bd7jh 3 жыл бұрын

sir I have followed all your steps as above but when I clear settings cache the dark mode is not turning off sir. I running the program in my device sir.

@saadrahim8274 2 жыл бұрын

can anyone explain to me how to use null safety version

@vivekn4u 2 жыл бұрын

nice video, just wanted to know how did you change the theme of tiles? is there any standard we should follow?

@vivekn4u 2 жыл бұрын

@@HeyFlutter can you show us how you apply the themes? I was unable to find any videos on this topic on your channel.

@ArivazhaganNagalingam 3 жыл бұрын

can you put a video on a full flutter web application?

@federicoboschini1512 2 жыл бұрын

I'm getting an "setState() or markNeedsBuild() called during build." error when I put for example buildLocation() function in the Widget's column list. With debug console I saw that TextInputSettingsTile runs markNeedsBuild() before build(). Why am I getting this error?

@HeyFlutter 2 жыл бұрын

Hey Federico Boschini, make sure to follow the tutorial step by step 🙂

@wishiwasamillionaire 2 жыл бұрын

Amazing video, as always! It really has made putting a settings page together much easier! Quick question. Is there a way to make the global settings 'overridable'? For example, if the user sets a setting globally, such as a measurement unit, but they might want to override the global setting on an individual page, is that possible? Thanks :)

@wishiwasamillionaire 2 жыл бұрын

@@HeyFlutter Thank you! I'll take a look 😀

@kwameg1776 2 жыл бұрын

Can you teach us how to change the language also?

@hin603 Жыл бұрын

Thank you sm, but why the SettingsGroup and another widget can't work in Flutter any solution plz? Is there any package that I should download?

@HeyFlutter Жыл бұрын

Thank You ND! Follow this link: github.com/Baseflow/flutter-permission-handler/issues/429 I hope you will get your answer 🙂

@hin603 Жыл бұрын

@@HeyFlutter Ah, thank sm. grateful for you

@cubegamer434 2 жыл бұрын

Hey, I get this error: Undefined name 'Utils'. why I become it, but Johannes not?

@azazelazazl7204 2 жыл бұрын

Same for me, can sb help us?

@aqsaameen5535 3 жыл бұрын

Is its subscription is free for source code?

@sounsavdan1033 3 жыл бұрын

I cannot access to get souce code

@umarkhabiliy7554 3 жыл бұрын

Mr.Milke you don't show Utils?

@TheNEOFAR 2 жыл бұрын

how to change background color of SimpleSettingsTile ?

@TheNEOFAR 2 жыл бұрын

@@HeyFlutter Thank you for answer. There is not that property for that plugin. I couldn't find.

@mikirinkode 2 жыл бұрын

there is an error when i try to run the project "Cannot run with sound null safety, because the following dependencies don't support null safety: - package:flutter_settings_screens"

@HeyFlutter 2 жыл бұрын

Thank You Muhammad Wafa! Follow this link: stackoverflow.com/questions/64917744/cannot-run-with-sound-null-safety-because-dependencies-dont-support-null-safety I hope you will get your answer 🙂

@kamalCode 3 жыл бұрын

Sir, how to make settings services and set all permission for flutter app.

@shahedhaffar5261 2 жыл бұрын

Please how to solve the null safety problem of the flutter setting screen package ??

@federicoboschini1512 2 жыл бұрын

Add "--no-sound-null-safety" when you run your app with "flutter run".

@HeyFlutter 2 жыл бұрын

Hello, Shahed Haffar! Follow this link: stackoverflow.com/questions/71221135/flutter-null-safety-issue I hope it will solve your problem. Thank You 🙂

@kouazo 2 жыл бұрын

Amazing tutorial. Thank you. How to monitor two keys with the valueChangeObserver? For instance for the theme change and the language change? Did you implement that in the source code?

@kouazo 2 жыл бұрын

In the video you use valueChangeObserver to rebuild the widget when the theme changes. I was wondering how to catch the language changes? I don't know if you have already shows how to do that in the project source code

@TheOriginx Жыл бұрын

@@kouazo What I have so far (by myself), just have to add shared preferences to your code and use it to change the value of your DropDownSettingsTile or any other Settings Tile: 1.- Install shared_preferences (flutter pub add shared_preferences) 2.- Import shared_preferences in your language widget page (import 'package:shared_preferences/shared_preferences.dart';) 3.- In your extends State widget, create a shared preferences object like this: final Future _prefs = SharedPreferences.getInstance(); 4.- Then in your DropDownSettingsTile, add the onChange method like this: onChange: (language) { _prefs.then((SharedPreferences prefs) { prefs.setInt(keyLanguage, language); }); },

@broteendas1194 Жыл бұрын

How do I avoid Null Safety without using the "--no-sound-null-safety" flag? Ref: Error: Cannot run with sound null safety, because the following dependencies don't support null safety: - package:flutter_settings_screens

@HeyFlutter Жыл бұрын

Hey, Broteen Das 🙂 Make sure to use updated version of all packages and those packages must support null safety

@johnk2145 Жыл бұрын

@@HeyFlutter with the latest null safety version tho it errors Settings.getValue(SettingPageUI.keyDarkMode, true) and wants to be written in a way like getValue(String key, {T? defaultValue}) pls help

@sivaKumar-bd7jh 3 жыл бұрын

when clearing the setting cache the dark mode is not turning off sir

@sivaKumar-bd7jh 3 жыл бұрын

sir I have followed all step as you said sir but dark is not turning off when I cleaning cache

@sivaKumar-bd7jh 3 жыл бұрын

I am running the code in my devices sir

@rezahosseinypour6669 2 жыл бұрын

didn't continue after the plugin

@DeviDot 3 жыл бұрын

how to make photo editor app in flutter

@DeviDot 3 жыл бұрын

@@HeyFlutter Sir, can you explain the operation did not work for me

@biscut6296 Жыл бұрын

Please use full screen when you code using visual studio

@HeyFlutter Жыл бұрын

Thanks for the feedback, BISCUT! 🙂

@j.k24 Жыл бұрын

how is the jobs for flutter devs? is it gaining traction?

@HeyFlutter Жыл бұрын

Thank you, jeroen k! 🙂. Yes if you know how to code in flutter. There are a lot of opportunities online.

@j.k24 Жыл бұрын

@@HeyFlutter im new to it but find it very nice to work with, at the moment im testing the graph ql dependency 🤙🏽

@rakhekhan3246 Жыл бұрын

Please provide the util.dart code

@HeyFlutter Жыл бұрын

Thank You Rakhe Khan!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

@AlexMarton Жыл бұрын

Not recomanded for Material 3 :)

@HeyFlutter Жыл бұрын

Thanks for your feedback, Alex Marton! 🙂

@tusharmishra6702 3 жыл бұрын

Please don't make your videos Private ever. They are really good

@jimmorrison2657 2 жыл бұрын

Mate, it's a great video, but you let yourself down by your over-aggressive attempts to make people pay to see your source code. I have no problem with you making money from your code (I also do this), but at least be honest with people. People have to subscribe first in order to see the source code, and then they find out that they have to pay if the want to see it.

@jimmorrison2657 2 жыл бұрын

@@HeyFlutter So, this is how you take criticism. You just pretend it never happened 👍

@johnk2145 Жыл бұрын

In the latest null safety version inside Settings.getvalue(HeaderPage.keyDarkMode, true); it errors with true. In the old library it was in the form of static T getValue(String key, T defaultValue) but with the latest one (and all the null safety versions) It wants to be written in a way like they library has it which is: static T? getValue(String key, {T? defaultValue}) i havent been able to make it work and the thing is that if i get rid of the ,true then when i navigator.pop from my settings page to the home page of my app and then i go the settings page again and turn dark mode lets say off, it doesnt work and remains on. The only way of fixing it is with a refresh but the bug is still there. Needless to say that with your method and with the flutter settings page without the null safety while running the main.dart with flutter run --no-sound-null-safety the bug isnt there so the only issue is the true inside the Settings.getvalue(HeaderPage.keyDarkMode, true) which needs to be rewritten differently. Pls help

@HeyFlutter Жыл бұрын

Thank you, John K! 🙂. Try to paste the error message with your question whenever you face any issue or error.

@johnk2145 Жыл бұрын

@@HeyFlutter so the only problem is that true value in final isDarkMode = Settings.getValue(SettingPageUI.keyDarkMode, true);

@johnk2145 Жыл бұрын

@@HeyFlutter "Too many positional arguments: 1 expected, but 2 found. Try removing the extra positional arguments, or specifying the name for named arguments.", In your code it errors the following: true inside of the Settings.getValue(SettingPageUI.keyDarkMode, true); The creator of the plugin defines it in its newest verison like static T? getValue(String key, {T? defaultValue}) . With the newest version i tried Settings.getValue(SettingPageUI.keyDarkMode, defaultValue: true); but when using navigtor.pop to go from the settings page to the homepage and then pressing the settings fab which uses navigator.push to go to the settings page the darkmode button doesnt work when switched. The bug lies withing the true value inside Settings.getValue(). i would be extremely greatfull if you could help me as i have to turn in this app for a uni project.

@briccio8343 2 жыл бұрын

I get an error with Shared Preferences: [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Exception: No Implementation Found

@HeyFlutter 2 жыл бұрын

Thank You Briccio! Follow this link: stackoverflow.com/questions/71901092/i-keep-having-errorflutter-lib-ui-ui-dart-state-cc209-unhandled-exception I hope you will get your answer 🙂

@briccio8343 2 жыл бұрын

@@HeyFlutter Thank you, do you know how I can use the value inside my DropDown Settings Tile key to use it to change my main color app for example?