Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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!;
            });
        },
    );
}
}
 

>Solution :

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");
    }
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading