I have some experience with SwiftUI and I wrote this code some time ago. I am currently learning how to use Flutter to build UI. How would I go about coding this? It's a floating Tab Bar that can open and close by swiping it.
This is basically an rounded rectangle HStack with 5 buttons inside of it that can animate into a single button if it's swiped or long pressed. I have just started with Flutter a couple of days ago and I'm still struggling a bit to convert my SwiftUI logic to Flutter. Any ideas?
struct TabBar: View {
@Binding var selected : Int
@State var expand = true
var drag: some Gesture {
DragGesture()
.onChanged {_ in self.expand = false}
}
var body: some View {
HStack {
Spacer(minLength:0)
HStack{
if !self.expand{
Button(action: {
self.expand.toggle()
}) {
Image("appleLogo")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 15, height: 15, alignment: .center)
.foregroundColor(.black)
.scaleEffect(2)
.padding()
}
}
else{
Button(action: {
self.selected = 0
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "house")
.foregroundColor(self.selected == 0 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 1
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "bubble.left")
.foregroundColor(self.selected == 1 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 2
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "plus.app")
.foregroundColor(self.selected == 2 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 3
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "cart")
.foregroundColor(self.selected == 3 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 4
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "person")
.foregroundColor(self.selected == 4 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
}
}
.padding(.vertical,self.expand ? 8 : 6)
.padding(.horizontal,self.expand ? 20 : 6)
.background(VisualEffectView())
.background(Color("TabBarGray").opacity(0.3))
.opacity(self.expand ? 1.0 : 0.3)
.clipShape(Capsule())
.padding(30)
.onLongPressGesture {
self.expand.toggle()}
.gesture(drag)
.animation(.interactiveSpring(response:0.6, dampingFraction:0.6, blendDuration:0.6))
.frame(maxWidth: UIScreen.main.bounds.width,
maxHeight: UIScreen.main.bounds.height, alignment: .center)
}
}
}
Open
Closed
I am also new to Flutter but generally speaking I would create a stateful widget to store the state of the button bar. Then you create the button bar as a stateless widget (using Container(child:Row(children...)
In the stateful widget you wrap the call of the stateless widget with whatever enables swiping (haven't used this so far). In there you will have something like setState(() {expanded = !expanded}) and possibly you call the stateless widget with something like
Container(
child: (expanded ? ShowBar() : Container()),
)
where you either show your stateless widget class ShowBar or an empty Container
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.