Flutter - Switch or button conditions

Priya
March 14, 2023
263 views
0 votes
2 Answers

I am a flutter beginner. I use a Cupertino switch for creating switches. If I press that switch it should open a container below the switch otherwise the button should stay the same. How to achieve this?

I tried. But I didn’t get it. Can anyone help to resolve this?

Sample code:

Text(
                            'Gift Wrapping',
                            style: GoogleFonts.poppins(
                                color: Color(0xff000000),
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                                letterSpacing: 0.4),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 98),
                          child: Transform.scale(
                            scale: 1,
                            child: CupertinoSwitch(
                              value: _giftwrapping,
                              thumbColor: Color(0xffffffff),
                              activeColor: Color(0xff6939ed),
                              onChanged: (value) {
                                setState(() {
                                  _giftwrapping = value;
                                });
                              },
                            ),
                          ),
                        ),

Answers

Try this

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

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: YellowBird(),
        ),
      ),
    );
  }
}

class YellowBird extends StatefulWidget {
  const YellowBird({ super.key });

  @override
  State<YellowBird> createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  
   bool  _giftwrapping = false;
  
  @override
  Widget build(BuildContext context) {
    return Column(
    
    children : [
      Text(
                            'Gift Wrapping',
                          ),
                        
                        Padding(
                          padding: const EdgeInsets.only(left: 98),
                          child: Transform.scale(
                            scale: 1,
                            child: CupertinoSwitch(
                              value: _giftwrapping,
                              thumbColor: Color(0xffffffff),
                              activeColor: Color(0xff6939ed),
                              onChanged: (value) {
                                print(value);
                                setState(() {
                                  _giftwrapping = value;
                                });
                              },
                            ),
                          ),
                        ),
      if(_giftwrapping)
      Container(
        child: Text("gift Box")
      )
    ]
    );
  }
}

You can use the Visibility widget to handle the Container below the Switch.

Here is the full class.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class SwitchCondition extends StatefulWidget {
  const SwitchCondition({super.key});

  @override
  State<SwitchCondition> createState() => _SwitchConditionState();
}

class _SwitchConditionState extends State<SwitchCondition> {
  bool _giftwrapping = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Switch Condition")),
        body: Column(
          children: [
            Text(
              'Gift Wrapping',
              style: GoogleFonts.poppins(
                  color: const Color(0xff000000),
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  letterSpacing: 0.4),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 98),
              child: Transform.scale(
                scale: 1,
                child: CupertinoSwitch(
                  value: _giftwrapping,
                  thumbColor: const Color(0xffffffff),
                  activeColor: const Color(0xff6939ed),
                  onChanged: (value) {
                    setState(() {
                      _giftwrapping = value;
                    });
                  },
                ),
              ),
            ),
            Visibility(
              visible: _giftwrapping,
              child: Container(
                  margin: const EdgeInsets.all(10.0),
                  height: 100,
                  color: const Color(0xff6939ed),
                  child: const Center(
                      child: Text(
                    "Switch turned on",
                    style: TextStyle(color: Colors.white),
                  ))),
            )
          ],
        ));
  }
}