Set the image for switch button in flutter

Question

How do I set the image for a switch button in flutter using the activeThumbImage property? I am a little confused on how to set the ImageProvider value for this property? Is there any example that I could look at that implements the activeThumbImage property of the Switch widget?

Answer 1

pubspec.yaml

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  flutter_inappwebview: ^5.3.2




dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: "^0.8.0"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

  assets:
    
     - assets/icon/google.png

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';


class MyChromeSafariBrowser extends ChromeSafariBrowser {
  @override
  void onOpened() {
    print("ChromeSafari browser opened");
  }

  @override
  void onCompletedInitialLoad() {
    print("ChromeSafari browser initial load completed");
  }

  @override
  void onClosed() {
    print("ChromeSafari browser closed");
  }
}

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  if (Platform.isAndroid) {
    await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
  }

  runApp(MaterialApp(home: MyApp(), theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFA7A5A5)),
      debugShowCheckedModeBanner: false));
}

class MyApp extends StatefulWidget {
  final ChromeSafariBrowser browser = new MyChromeSafariBrowser();

  @override
  _MyAppState createState() => new _MyAppState();
}


class _MyAppState extends State<MyApp> {



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Image Button"),
    ),

      body:


      SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child:
        Column(children: <Widget>[



            Container(
                  // padding: EdgeInsets.all(50),
                  alignment: Alignment.center,
                  child: IconButton(
                    icon: Image.asset('assets/icon/Amazon_icon.png'),
                    iconSize: 50,
                    color: Colors.green,
                    splashColor: Colors.purple,
                    onPressed: () async {
                      await widget.browser.open(
                          url: Uri.parse("https://www.amazon.in/?&_encoding=UTF8&tag=bappasaikh-21&linkCode=ur2&linkId=e3b009b026920c3cfdd6185fadfb7e67&camp=3638&creative=24630"),
                          options: ChromeSafariBrowserClassOptions(
                              android: AndroidChromeCustomTabsOptions(
                                addDefaultShareMenuItem: false,),
                              ios: IOSSafariOptions(barCollapsingEnabled: true)));
                    },
                  ),
                ),
       
        









        ]),


      ),


    );
  }
}

Answer 2

Here is my code.

class ToggleButtonScreen extends StatefulWidget {
  @override
  _ToggleButtonScreenState createState() => _ToggleButtonScreenState();
}

class _ToggleButtonScreenState extends State<ToggleButtonScreen> {
  bool _value = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: _value ? AssetImage("images/cnw.png") : AssetImage("images/cnw.png"),
                fit: BoxFit.cover,
              ),
            ),
            child: Padding(
              padding: EdgeInsets.all(AppDimens.EDGE_REGULAR),
              child: Column(
                children: [
                  _normalToggleButton(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

Widget _normalToggleButton () {
    return Container(
      child: Transform.scale(
        scale: 2.0,
        child: Switch(
          activeColor : Colors.greenAccent,
          inactiveThumbColor: Colors.redAccent,
          value: _value,
            activeThumbImage: AssetImage("images/cnw.png"),
            inactiveThumbImage : AssetImage("images/simple_interest.png"),
            onChanged: (bool value){
             setState(() {
               _value = value;
             });
            },
        ),
      ),
    );
}
}

Answer 3

You can use an AssetImage or NetworkImage to get an ImageProvider that is suitable for use as an activeThumbImage. Learn more about asset images in the Adding Assets and Images in Flutter tutorial.

Here is some example code that draws the above Switch:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  bool _enabled;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Switch(
          value: _enabled,
          onChanged: (bool value) {
            setState(() {
              _enabled = value;
            });
          },
          activeThumbImage: new NetworkImage('https://lists.gnu.org/archive/html/emacs-devel/2015-10/pngR9b4lzUy39.png'),
          inactiveThumbImage: new NetworkImage('http://wolfrosch.com/_img/works/goodies/icon/vim@2x'),
        ),
      )
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
      primarySwatch: Colors.deepPurple,
    ),
    home: new MyHomePage(),
  ));
}