在颤动中设置切换按钮的图像

Question

如何使用activeThumbImage属性在flutter中设置切换按钮的图像？我对如何为此属性设置ImageProvider值感到困惑？是否有任何我可以看到的实现Switch小部件的activeThumbImage属性的例子？

Answer 1

您可以使用AssetImage或NetworkImage来获得适合用作ImageProvider的{​​{1}}。在Adding Assets and Images in Flutter教程中了解有关资产图片的更多信息。

以下是一些绘制上述activeThumbImage的示例代码：

Switch

Answer 2

这是我的代码。

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

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

ma​​in.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)));
                    },
                  ),
                ),
       
        









        ]),


      ),


    );
  }
}