Home > OS >  How can I correctly use If conditionals in onPressed and setState (dart, flutter)
How can I correctly use If conditionals in onPressed and setState (dart, flutter)

Time:10-27

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");
    }
  }
}
  • Related