6

I am currently designing a widget for my app and basically, the widget should consist of three buttons. So far, I didn't find any tutorial on how to add buttons to an iOS Widget Extension. I see that e.g. Google Maps uses buttons in their widgets.

How can this be done?

YodagamaHeshan
  • 4,996
  • 2
  • 26
  • 36
ulrike_hansel
  • 115
  • 1
  • 6

2 Answers2

9

Widgets do not have animation or custom interactions, but we can deep link from our widget into our app. systemSmall widgets are one large tap area, while systemMedium and systemLarge can use the new SwiftUI link API to create tappable zones within the widget.

enter image description here

Demo ; using Link

  1. in your widget extension.
    struct YourWidgetEntryView : View {
        var entry: Provider.Entry
        
        @Environment(\.widgetFamily) var family //<- here
        
        @ViewBuilder
        var body: some View {
            switch family {
            case .systemSmall:
                Text("Small") //.systemSmall widgets are one large tap area
            default:
                HStack{
                    Link(destination: URL(string: "game:///link1")!, label: {
                        Text("Link1")
                    })
                    Spacer()
                    Link(destination: URL(string: "game:///link2")!, label: {
                        Text("Link2")
                    })
                    Spacer()
                    Link(destination: URL(string: "game:///link3")!, label: {
                        Text("Link3")
                    })
                }
                .padding()
                
            }
        }
    }
  1. in your app
struct ContentView: View {
    
    @State var linkOne: Bool = false
    @State var linkTwo: Bool = false
    @State var linkThree: Bool = false
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(
                    destination: Text("Link1-View"), isActive: $linkOne) {
                    Text("Link1")
                }
                NavigationLink(
                    destination: Text("Link2-View"), isActive: $linkTwo) {
                    Text("Link2")
                }
                NavigationLink(
                    destination: Text("Link3-View"), isActive: $linkThree) {
                    Text("Link3")
                }
            }

            .navigationBarTitle("Links")
            .onOpenURL(perform: { (url) in
                self.linkOne = url == URL(string: "game:///link1")!
                self.linkTwo = url == URL(string: "game:///link2")!
                self.linkThree = url == URL(string: "game:///link3")!
            })
        }
    }
}
YodagamaHeshan
  • 4,996
  • 2
  • 26
  • 36
0

If you want to have three buttons in your widget, then you will need to use the medium or large widget style. This will allow you to use Link controls for each button. The small widget style only allows you to set the widget URL.

The button will just be a view that has the link associated with it. When the user presses that view, your app will be started with the associated link. You will need to keep track of the button state in your app and flip the state each time the user clicks the view.

https://developer.apple.com/documentation/widgetkit/creating-a-widget-extension

See the "Respond to User Interactions" section.

Here is some info on Links. https://developer.apple.com/documentation/SwiftUI/Link

TALE
  • 960
  • 13
  • 22