CodeWithBrylie - e37

gistfile1.txt

 Hello and welcome to another live code hangout.
Today I'll be working on a small Flutter app.
I've created an initial project and I'd like to work with some MIDI and see if I can get MIDI to display in a Flutter app on a piano keyboard.
I have some ideas of how that could be useful but need to take the first steps.
So I've scaffolded the initial app. I'll push that up.
And one second.
I just remembered on...
For some reason on KDE VS code is not using my local keychain. So when I do operations.
If I get SSH it's going to ask me if my password over and over and over and over and over.
So we'll delete this local repo. I've got it cloned up here so everything's pushed to GitHub.
So if I clone it by HTTPS then it'll resolve this little password problem. So here's the app source code.
We'll open the directory.
I might have to open it again.
Folder sort of moved.
And let's see what we get. Maybe it was working actually. There we are.
So if I open up the lib directory maindart we'll see the default code and I can run that in debug mode.
So it's going to run pub get.
And we have the basic counter app. Light mode.
So the first thing I would like to do is...
Flutter dark mode.
I'd like to get in the habit of this.
Theme theme data. So this is... See if it still works. Okay so we've got the theme theme data.
Theme mode dark.
I'm not necessarily going to have a toggle. Whoops. Where did the Flutter app go?
Okay that's a bit problematic. Did I? Oh I closed it I think. Okay okay.
Yes exited. Let's rebuild it. I can hot reload that. So upvote our question.
Answer even if it's not the correct one at this point. We also showed the toggle. So that could be cool. Oh uh oh. Factory theme data.
Theme mode. No name parameter with theme mode. Okay yeah it's in 2022.
Theme mode. I would maybe have spelled it wrong. Theme mode.
Under the... Ah okay okay. It's under the top of the object.
There we go.
Still kind of light though isn't it?
Okay so...
Perhaps we have to define this.
There we go. Okay so you have the dark theme settings and the light theme settings.
Or just...
And I think...
I don't know. This seems the more appropriate way of doing the dark theme definition.
So the other aspect would be our scaffold background color.
Looks decent and the text is visible. Okay so we've got some state here. We'll probably end up destroying this state.
So hmm gotta break down this problem.
So when we start coding it's often...
We have an idea or a task and we often will just go straight into coding that idea. And I haven't really done... So I'm doing that here. I'm not really
clear on the path that follow.
Where it usually is good to start you know the diagram or pencil and paper or something like that.
But in my mind is I have an app with or without a title bar. App bar.
And that app should display a piano or just even a MIDI note. Let's just start there on a screen instead of showing this number three we'll show the MIDI note that's being played.
So to do that...
I'm going to give GBT my context.
It'll respond. Your current litter application is set up to use the dark theme by default as indicated by the theme mode theme mode dark. Setting within the material app widget. This setting forces the app to use the dark theme provided by its theme data. If you want to switch between light and dark themes dynamically you'll need to add some mechanism to toggle theme mode property of your material app widget. However since you set the theme mode to theme mode dark it will only use a dark theme settings you have defined. If you have any specific questions about the code you posted or if you need to make adjustments or understand how certain parts work feel free to ask. So yeah GBT is kind of summarizing the code here and offering assistance. I could do a dark theme toggle.
Let's make a dark light theme toggle with the default to dark. To implement a light and dark theme toggle in Flutter with the default set to dark you'll need to modify the my app class to be a stateful widget so that you can change the state of the theme during runtime. Here's a step-by-step guide. Change the my app to a stateful widget and I'd like to actually...
rename it.
To piano app.
Good and then we'll add a toggle function to switch between theme mode light and theme mode dark. Use a switch or similar widget to allow the user to toggle between themes. Just for what it's worth I'm thinking of having a switch right here. This is very conventional you have the light and dark toggle up here and maybe two little icons so sun and moon.
Okay so we renamed it we've made it into a stateful widget okay so let's see if there's a refactoring tool here. No that's cool though.
Stateful widget now it needs to implement the create state
and the create state will have this build function so we'll take all of this from here up to here
and move it into
the create state.
Piano state create state and we need a class.
Piano state widget build material app and just give this fully fleshed out here.
Okay so it's...
Copilot is a little bit lost.
Interesting okay so it's copilot's just this...
implementing the primary interface here but here we'll just paste this over right in and more or less should be the same if I do a hot or just a restart app restart.
Yeah there we go boom boom boom so still working the same.
So we've got theme data.
Dark theme settings. Okay so then in this state for our piano app we are going to
set the theme mode to dark theme.
And then we'll toggle we'll create a function to toggle state right here.
Before the build all right.
Methods before the overrides perhaps is credential I'm not sure.
Okay theme mode is on interesting and then what it's doing so we've got to build theme data. These material three true.
Home theme or toggle theme.
So we're passing in this function to the actual the page which contains this scaffold interesting.
That means each page.
We'll need to implement this widget.
Perhaps what I can do. Is return the material app from the piano app it's more or less where the app is defined.
Now I'm changing context a bit.
Let's move the material app definition to the piano app formerly my app in the code above. So we can only define the display mode toggle in a single location and since the material app shares a stronger relation semantic relationship to the piano app.
So we're going to refactor that. Piano app state toggle theme bool material app title piano app theme mode etc then we'll. Let's actually delete that.
I'm going to delete the home page.
And yeah.
Okay. Oh I cast D. Okay so yeah so scaffold I think.
There we are. Okay somehow it's picking up on the dark and light theme very cool.
All right so then I need to have these correct theme data so this is the dark theme and so all I need to do is pick a primary color use material three color scheme for my default theme.
Let's see what happened here.
A mode theme mode okay so I've got it hard coded but I wanted to toggle of course.
There it is wow.
It's pretty nice. All right and we'll default it to dark it's all right uh doesn't have to be off on anyway here's what it is.
Here's our updated and simplified app.
You updated the Flutter app code as uh and it's well structured and simplified it includes a piano app stateful widget that manages the theme state allowing the user to toggle between light and dark mode themes using switch and app bar the material app widget and now encapsulates the piano app class making the app's primary functionality and theme management more centralized. The home screen
presents a simple hello world text in this entry. There's a quick summary of the functionalities. The theme mode variable holds the current theme mode defaulting to dark mode the theme mode toggle theme function updates the theme mode based on a switch position triggering a rebuild of the app and the new theme. The switch in the app bar allows you to toggle between light
and dark themes. The home page is a simple scaffold with an app bar and a center widget containing a text message. Your in-state and dispose methods are overridden but currently do not contain any code we're only calling super inside of them. Essentially if you need further judgments uh adjustments feel free to ask let's disable the debug and the label.
Then we'll commit push pull request merge and start on the next feature.
Okay so it's it's been really helpful but uh I don't need the whole thing this was the only line that I needed but okay it's it's it's not the only line that I need to do it's not the only line that I need to do it's not the only line that I need to do it's not the only line that I need that I needed but okay it's gonna give me a lot of tokens there. So right after the piano app
we'll debug okay cool.
Now I'm gonna give it a bit more abstract uh request to see the context here. I'd like to add sun and moon icons next to the um switch but I'm not going to say switch. I'll say let's add sun
and moon. Let's add sun and moon icons to indicate the light and dark mode state. So maybe this is too vague. I should be more specific.
So let's add sun and moon icons to indicate the light and dark mode state on the corresponding side of the toggle switch. To add sun and moon icons to the switch to indicate the light and dark mode you can wrap the switch in a row widget and place icon widgets appropriately. Here's how you can update the app bar in your piano app. Very cool. So here's the app bar and in our actions we have a list that currently contains a switch. So here's our list moon icon. So I'll just grab the whole list so avoid
copy and paste errors hopefully reduce the likelihood of those happening. Okay
I see. So it's conditionally yeah it's this is interesting. So I was thinking it would kind of understand that. Okay so I'll fix this.
Let's see so to the left should be moon to the right should be sun.
So this would be icon in this dark mode.
And this would be icon in light mode.
I think it hallucinated like it got the intention.
Oh yeah let's leave that comment in but this should be sun icon.
All right there we go so we have a basic light dark toggle. Light dark toggle.
So my basic prompting philosophy I would say or sort of framework of thinking is 1080 10. If I start off with a good 10 percent a good prompt done with enough information and specificity I'll get the generative model to give me 80 percent of the output that I need. It's almost there sometimes it's right on the money it's just a perfect output but oftentimes I need to do about 10 more percent of work as we saw here I needed to just fix these icons. So it's sort of like a balance and it ends up with this 80 20 split. If we get this good 10 percent the model can do about 80 percent of the work so saving me all the fiddling and syntax and all that but I still have to do that last 10 percent so I have to have a good prompt and be able to take it to completion. So with that regard I very rarely see the well the model can't do 100 percent of the work you have to prompt it so that's the first thing so far the models don't do work to my knowledge without prompting so you'll always have to do some portion and it's not common when you're working with more complicated tasks especially to get 90 percent output from a 10 percent prompt sometimes I've gotten like a one prompt output that was just ready to roll for like a basic blog article for example on GPT-4
but typically at least it takes one prompt one output and some work and then I often end up iterating on the work even we can see that here I'm iterating on the work so through the conversation I'm still following this 80 20 rule in a way but you know now we're adding this switch now we're adding um tweaking layout or things like that okay but that's a bit of an aside so implement dark mode
dark and light mode toggle I could almost just publish this as a hello world app with dark and light mode this is a good tutorial so let me just think about that for a second
critical request I think a lot of people would need to would be interested in a dark and light mode toggle
so we'll come back over here and I've got a pull request open
I'll merge that
so let's see
let's write a short blog post describing how to make a flutter app with dark and light mode toggle using the code as an example
uh
so
So let's write a short blog post describing how to make a Flutter app with dark and light mode toggle using the above code as an example. The blog post should be around 500 words and use an engaging helpful tone of voice yet straightforward wording. Include the code examples at appropriate portions of the text and include descriptions for each line of code. I think they didn't really understand that.
Disregard the state and dispose methods since they aren't meaningful at this point. Let's see what we get.
Well crafting a theme toggle Flutter app, switch between light and dark modes with ease.
As more users come to expect a customizable viewing experience in their apps providing a light and dark mode toggle has become a staple in app development.
Flutter with its rich set of widgets and properties makes this not only possible but pleasantly straightforward. That's true, it was very straightforward. This post will make a walkthrough how to add a theme toggle for your Flutter app complete with an intuitive sun and moon icons. With intuitive sun and moon icons, yeah. Boing, boing.
That's nice.
Let's start by setting the stage with our main function and piano app widget. We launch our app with run app, const piano app which serves as the entry point. I'll rename it in the article. Our piano app is a stateful widget because theme toggling will change the app state.
So here we have just a bare bones app.
Next we define a piano app state to hold our theme state. We initialize the theme mode to dark with theme mode equals theme mode dark.
Our toggle theme function takes a boolean is on interesting.
And sets the theme mode to light or dark depending on the switch's position.
This is where set state shines, notifying the framework to redraw the widget with the updated theme mode.
Yeah, so I suppose it's that the toggle is on.
Makes sense. On, off. Okay. It's turning the light on, turning the light off.
Nice. The lights should be off by default. Save power.
Yeah.
All right. So we got that toggle thing in dark code for instance. And in the build method we craft our material app which now includes the theme toggling logic. By setting debug show check mark banner to false we ensure clean UI without the debug tag. So yeah, this is nice. Here's the piano thing.
For our themes we define both dark theme and theme. The dark theme uses brightness dark while theme uses a color scheme seeded with blue for light mode.
Yeah. Whoops.
And blue is decent. I like it.
Didn't mention material 3.0 is all right.
Now the star of the UI that's scaffold within the material app's home, the app bar not only holds our title but also a row of icons and a switch that control the theme mode.
Dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun,
dun, dun, dun, dun. Good. Yeah, yeah yeah, yeah yeah. Exactly. Yeah and we exports star here the human border between our green and blue and pin. This is literally an spotting camp. This is exactly what a design particularly shows by an implementation on an organization, that and then come on get off there.
Conditionally show them icon, which was why the icons were changing with this date. So yeah, it's a model that's hallucinating just a little bit by using Flutter's theme data and theme mode. We created a seamless way to allow users to switch between light and dark themes. It's not only caters to their visual preferences, but it can also help save battery life on OLED screens and reduce eye strain in low light conditions. Boom. Those are crucial. I was having some major eye strain yesterday with working with the, uh,
lane flow user interface and documentation. As you can see, I've got everything in dark mode here. I'm really, I just need to be a little bit more subdued. Uh, it's just painful. Otherwise just stare at a bright shining
wall of white implementing a theme toggle in your Flutter app, not only enhances your user experience, but also showcases the dynamic capabilities of your app, but just a few lines of code. You can give your users the power to choose their preferred theme, making your app more inclusive and user friendly. Happy coding. I like it. It's good. Yeah. And that's a one-shot prompt. Um,
I still have to do the 10% basically to fix the minor details, but let's go ahead and publish this. So I'll click somewhere. It's just going to publishing mode. Here it goes. And we'll publish this on dev.to for your not familiar,
bright wall of light, dark mode. Uh, dev two is a like a community of developers and, uh, it's sorta at this point in like there's not spammy advertisements. There's not a modal dialogues telling you to sign up for an email newsletter or register to view full articles, um, like sub stack and medium respectively. Uh, does it have a dark mode settings? Let me just check this in case there's some personal information over here.
Settings. The settings are dark customization, dark theme.
Okay. I see what happened. It's, it did have my setting for dark theme, but I had to, since I signed in, it didn't refresh the page. There's some dynamic stuff happening there. So yeah, so it's got a dark mode theme and what we'll do, what we'll do is have a little bit of fun here. 8 30, about a half hour.
Um, we will post make a new post. There we are. And I'll paste the,
and yeah,
that's pretty good. You know, pretty good, pretty good. Hopefully it's not too long. Uh,
Flutter
programming, uh,
accessibility
or user experience
and
tutorial. Yeah. Very good. Customizable. Uh, one thing I usually do is run it through, um, Grammarly.
Let's see if I've got discord installed here and also
yeah, good discord. I also generate a cover image. It's always nice to have a cover image.
Discord new version available. Ooh, buddy.
I think I got it.
Yeah.
My browser's keep freezing. So what's going on there?
I have to like close and reopen it.
Oh, it's good. Two windows. Oh, there it is.
Save. Cancel that.
Done. Download install. Uh, actually let's try, let's try.
New chat with dolly install package.
Oh, okay.
Okay. So it's installing my thing. I'll put it over here. GPT dolly. Oh, come on. Ah,
okay.
Aspect.
It's like it is responsive dolly.
What's the typing is not happening. Done.
It's typing is working here.
They have this weird aspect ratio.
I get it's 42 more for 20. Okay.
Aspect ratio 1000 by 4 20 an image of a star night blending from left to right into a sunny day signifying the transition from dark to light.
So I don't know if dolly can do aspect ratio stuff. It doesn't give you much of an interface. The chat interfaces just going to prompt dolly on its own. We'll look at the prompt it generated.
Meanwhile, come back to my post.
We'll call it dark light app. Ooh, sounds kind of cool.
[inaudible]
[inaudible] and out of curiosity, if I do theme,
well yellow,
just curious
for orange. What does it look like?
Yellow.
Golden.
I'll leave it alone.
[inaudible]
[inaudible] no instances of piano.
It did adhere to the, uh, this is cool.
Aspect ratio, I think. [inaudible]
The prompt wasn't quite,
quite there.
Let's see.
So maybe I can change my prompt.
Well, I can try to score.
[inaudible] Okay. So we can try.
Please generate a mid journey prompt for the same idea.
To create a problem for an image generation model like mid journey, he would want to describe the scene with as much detail as needed to convey your concept. Since I can directly generate images for you here. I've already done so. However, if you're looking for out of constructive prompt, it might look something like this. Great image that illustrates a seamless transition from night to date on the left side, depict a dark starry night with a crescent moon gradually blending into a soft pastel colors of dawn in the middle. Then as the scene moves left to the right, show a clear sunny day with bright blue sky and golden sun rising at the horizon.
Interesting. Gluten fluffy white clouds scattered across the direct day sky. The aspect ratio should be panoramic emphasizing the gradual change from dark light. All right. So there's
panoramic could be a good keyword though. There's a loss of thread though. I need that specific aspect ratio.
Imagine
an image.
So there we have the aspect ratio. That's good.
It looks like we've got dark to light.
They're hard transitions at this point, which might be okay.
Dark light, light, dark, light, dark.
So this is the closest to the dark light theme.
Got some trees in the foreground. Yeah, this is cool.
So yeah, I like it except
that it's like an eclipse.
Here are all the several eclipses. Okay.
This is kind of cool, but it got the order wrong.
This is the one that got the order right. So let's see if I can create some variations of number one. One, two, three, four.
Same prompt. I mean, it was good output.
I'm going to try something. I'll be right back.
A little bit worse, but okay.
Better angle or his background.
Trade offs. All right. We're still waiting for the thing to complete.
So let's see, actually I'm going to get some water.
Looks like it's frozen.
Try it again. Double the prompt but something's wrong with it.
Okay, now both of them are working.
Left right, left right, this is good. So these top two are good. I like the little tree here. They can be distinct scenes. This is nice though. Ah, this is nice but it's like squished the moon. What happened to the moon? This is cool.
All right, wow. What do we get here? Dark, light. These are interesting ones. Okay, now I can't, I'm trying to say the moon can't be out during the daytime but I would like the sun to be in the daytime. So this is the closest one. Let's go with this.
The sun and moon look the same.
This is kind of nice, a vertical transition.
Let's go with that one actually. It's not what I was asking for. I was too focused on this horizontal thing but this is nice.
Dark light toggle.
We will upscale number four.
So yeah, sometimes just learning to kind of compromise and accept things as they are.
That's a hard thing to do and you have a particular way you want it.
Especially with the generative AI, it's like going to do things sort of how it does it. But within the guidelines and constraints, so to balance. Now I could just do some strong variations of this just to see.
If they're, usually the first one is good, is the best for some reason. When I do these variations, I very rarely get a result that was more appealing than the first one.
Not sure why.
Or if it's just my imagination.
This one is interesting.
That one is crazy.
You know I sort of like this one the best. Okay.
It's huge and it's got stars in it. So it doesn't make sense. Dang it.
This one did my horizontal split. All right, so I'm going with this one. Got the moon. There's no stars in the moon. The sun's coming up.
We'll save that image.
Downloads or just my desktop for the moment.
And dev2, add cover image, desktop.
I think it's good and suitable for a desire to share.
We'll preview it, publish it, preview it. Crafting a theme toggle Flutter app.
Dark light. Switch between light and dark lines with ease.
Yeah.
Yeah, and then I need to fix the toggle code.
The icon code, which is actually.
This should be dark mode.
The dark icon that is.
And this should be light mode icon.
Excellent. All right, let's publish.
I can still edit it in things, but I think publishing is okay. So there we go. Producing a theme toggle Flutter app. Switch between light and dark modes with ease.
Published on dev.to.
Fun stuff. I like that. Sharing things we learn along the way.
Promoting inclusivity, accessibility, knowledge sharing, of course, and open source development.
So I've merged this pull request, deleted the branch in a future session. I don't really have time today, but I will continue working with the piano app.
Again, the source code is on GitHub.
We will work with some MIDI data or displaying piano notes. I'm not sure which order, probably the MIDI data first, just to get some information on the screen, what note is pressed and to learn the structure of the data.
That'll kind of inform the design of the piano keyboard. I'll have to think about how to associate particular keys with notes. Perhaps we'll have a global state that tracks the MIDI notes that are currently engaged or where we've received note on events, but have not received note off events.
And then looks at those notes in the octave range and passes them into a keyboard, which in turn passes them into the individual keys of the keyboard, each key having its own note in octave. I have to look again at the data structure and it'll use state to toggle the background color of the key based on if it matches the MIDI input. There'll be nuances like how to render a piano keyboard. I won't probably get hyper realistic or even stagger the keys.
So for the first pass, I'll just keep it as simple as possible.
Okay, well this has been another live code hangout. Thanks for your time. I hope you're doing well and have a great day.