How to Use If Statement Inside Scaffold

Question

I would like to use if statement inside Scaffold but I do not know how to achieve it or is it really possible to do. Here is the code.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RumahKita'),
        centerTitle: true,
        backgroundColor: Colors.redAccent,
      ),
//IF SCREEN ID = 0, means HOME(), then it shows the FloatingActionButton
      if(screenId==0)...[
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: (){
          globals.scrollController.animateTo(0, duration: Duration(milliseconds: 300), curve: Curves.fastOutSlowIn);
        },
        backgroundColor: Colors.red,
      ),
      ] else...[], //RETURN NONE
      body: screens[screenId],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: screenId,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Main'),
          BottomNavigationBarItem(icon: Icon(Icons.search),label: 'Search'),
        ],
        onTap: (index){
          if(this.mounted) {
            setState(() {
              screenId = index;
            });
          }
        },
      ),
    );
  }

I really appreciate any answers. Thank you.

Answer 1

You can use a Ternary Conditional to check a bool and if it is true or false return something ie

floatingActionButton: screenId == 0 ? FloatingActionButton() : SomethingElseReturned();

Answer 2

Just create a floatButton variable and assign it with a FloatingActionButton inside the build(), and for displaying it use a ternary operator, or just a normal if else. Here is the code:

  import 'package:flutter/material.dart';
  import 'package:just_for_test/second_screen.dart';
  import 'home.dart';

  void main() {
    runApp(const MyApp());
  }

  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key, required this.title}) : super(key: key);

    final String title;

    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    List<Widget> screens = const [
      Home(),
      SecondScreen(),
    ];
    int _counter = 0;
    int screenId = 0;

    void _incrementCounter() {
      setState(() {
        _counter++;
      });
    }

    @override
    Widget build(BuildContext context) {
      FloatingActionButton floatButton = FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      );
      return Scaffold(
        appBar: AppBar(
          title: const Text('RumahKita'),
          centerTitle: true,
          backgroundColor: Colors.redAccent,
        ),

        floatingActionButton: screenId == 0 ? floatButton : null, //
        body: screens[screenId],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: screenId,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Main'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          ],
          onTap: (index) {
            if (this.mounted) {
              setState(() {
                screenId = index;
              });
            }
          },
        ),
      );
    }
  }

Answer 3

Use Ternary operator and return SizedBox with height 0 when there is nothing to return:

floatingActionButton: screenId == 0 ? FloatingActionButton() : SizedBox(height:0);