Im supposed to make it so that a different text appears after pressing the floating button, according to the item chosen in the dropdown menu. So, how to connect floating button to the item in dropdown menu?
Right now, when I press, nothing happens.
I have tried putting if statements in setState and then setting showText according to dropdown menu value.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DropDownButton and FloatingActionButton',
theme: ThemeData(
primarySwatch: Colors.green,
floatingActionButtonTheme: const FloatingActionButtonThemeData(
splashColor: Colors.tealAccent,
hoverColor: Colors.redAccent,
),
),
home: const MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int showText = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Geeksforgeeks"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const DropdownButtonExample(),
image(),
]
)
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
onPressed: () {
if(_DropdownButtonExampleState().dropdownvalue == "Item 3"){
setState((){
showText = 1;
});
}else if (_DropdownButtonExampleState().dropdownvalue == "Item 2") {
setState((){
showText = 2;
});
}else{
setState((){
showText = 3;
});
}
}
),
);
}
image(){
if (showText == 1){
return const Text("Yo");
} else if (showText == 2){
return const Text("Hi");
} else{
return const Text("Hello");
}
}
}
class DropdownButtonApp extends StatelessWidget {
const DropdownButtonApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Center(
child: DropdownButtonExample(),
);
}
}
class DropdownButtonExample extends StatefulWidget {
const DropdownButtonExample({Key? key}) : super(key: key);
@override
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownvalue = 'Item 1';
var items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
];
@override
Widget build(BuildContext context) {
return DropdownButton(
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
);
}
}
CodePudding user response:
First of all, combine your DropdownButton
widget with your MyHomePage
widget, then use dropdownvalue
instead of _DropdownButtonExampleState().dropdownvalue
like this:
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int showText = 1;
//add states here:
String dropdownvalue = 'Item 1';
var items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Geeksforgeeks"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
DropdownButton(
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
image(),
]
)
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
onPressed: () {
if (dropdownvalue == "Item 3") {
setState(() {
showText = 1;
});
} else if (dropdownvalue == "Item 2") {
setState(() {
showText = 2;
});
} else {
setState(() {
showText = 3;
});
}
}
),
);
}
image() {
if (showText == 1) {
return const Text("Yo");
} else if (showText == 2) {
return const Text("Hi");
} else {
return const Text("Hello");
}
}
}