Thread by @jsngr

I want to show you just how easy it is to recreate this Control Center widget in SwiftUI with interaction, animations, and all using a Swift Playground.

Thread 👇

Using Swift Playgrounds (on iPad or Mac), let’s make the circle + icon component (using SF Symbols) and add some text beneath it.

We place these together in a VStack (vertical stack) to get them to vertically stack on top of one another.

Next, let’s make a 2x2 grid of the component we just made.

We’ll place two HStacks (horizontal stacks) inside of a single VStack so to do this.

- We’ll adjust the icons + text of the new components we copied
- Introduce a variable called “spacing” (we’ll use this later to control spacing & padding)
- Add a background color to our containing VStack

Let’s introduce a variable called “isExpanded” so that when we tap on our widget it can grow and shrink by hiding the text labels.

To do this, we’ll use an onTapGesture on our VStack to toggle “isExpanded” on and off. We’ll also make each text label visible if expanded.

Next up, animation.

This is as simple as wrapping our “isExpanded” toggle inside of withAnimation. We’ll also adjust our “spacing” variable we introduced earlier to grow or shrink depending on if we’re expanded to give the widget some breathing room.

Let’s make the WiFi button toggle-able, and turn it blue when it’s enabled.

- Introduce a “wifiEnabled” variable
- Wrap our WiFi VStack inside of a Button so that we can toggle wifiEnabled on or off.
- Make the background of the WiFi circle blue if enabled.

Last but not least, let’s speed these animations up by providing some durations to withAnimation

Nice! We’ve recreated a Control Center widget that animates to grow and shrink. We can also turn WiFi on or off without expanding the widget.

This is just a small example of placing the focus on layout and style and letting SwiftUI do the rest automagically ✨

Here’s the code: gist.github.com/jordansinger/3…

Please reach out if I can help clarify anything or with any questions!