Switching Text widget with Switch (Flutter)

Question

I'm trying to make a swap widget, which shows two different texts. When activated, it shows a TextField below it, and the top one would be invisible, and when disabled it shows a Text above it, and the bottom one is invisible. But it's not showing anything on the screen, just the button, and I don't know what to do. There is no error log, nor at run time.

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool isSwitched = false;
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Text'),
        centerTitle: true,
      ),
      body: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 500, sigmaY: 500),
          child: Container(
            width: 500,
            height: 500,
            child: Column(
              children: [
                Switch(
                  value: isSwitched,
                  onChanged: (value) {
                    setState(() {
                      isSwitched = value;
                    });
                    textoLaranja();
                  },
                  activeTrackColor: Colors.grey[300],
                  activeColor: Colors.grey[300],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  textoLaranja() {
    isSwitched == false
        ? Container(
            child: Column(
              children: [
                Expanded(
                  flex: 0,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Valor a receber em 14/10/20",
                              textScaleFactor: 1.3,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: 30),
                        child: Text(
                          "R\$ 1250,35",
                          textScaleFactor: 1.3,
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: Colors.orange),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        : Container(
            child: Column(
              children: [
                TextField(),
              ],
            ),
          );
  }
}

Answer 1

You misplaced calling textoLaranja, It should be a child of the Column and not in the Switch onChange. Also, you have to return the widget.

Check this out.

class _State extends State<MyApp> {
  bool isSwitched = false;
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Text'),
        centerTitle: true,
      ),
      body: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 500, sigmaY: 500),
          child: Container(
            width: 500,
            height: 500,
            child: Column(
              children: [
                Switch(
                  value: isSwitched,
                  onChanged: (value) {
                    setState(() {
                      isSwitched = value;
                    });
                  },
                  activeTrackColor: Colors.grey[300],
                  activeColor: Colors.grey[300],
                ),
               textoLaranja(); //CALLED HERE, SO IT IS A CHILD OF THE COLUMN.
              ],
            ),
          ),
        ),
      ),
    );
  }

  textoLaranja() {
    return !isSwitched //RETURN ADDED
        ? Container(
            child: Column(
              children: [
                Expanded(
                  flex: 0,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Valor a receber em 14/10/20",
                              textScaleFactor: 1.3,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: 30),
                        child: Text(
                          "R\$ 1250,35",
                          textScaleFactor: 1.3,
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: Colors.orange),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        : Container(
            child: Column(
              children: [
                TextField(),
              ],
            ),
          );
  }
}