如何在颤抖中自定义开关按钮 [英] How to customize the switch button in a flutter

问题描述

在我的应用中，我希望使用该开关在开/关之间切换设置，分别为true/false.当我去构建它时，事实证明flutter提供了一个默认开关，但这不是我想要的，我想根据我的UI对其进行自定义

这是颤振开关按钮:-

这就是我想要的:-

如何使UI成为可能?

解决方案

您可以使用软件包

In my app, I want the switch is used to toggle a setting between on/off which is true/false respectively. When I went to build it, it turned out that flutter provides a default switch but it is not what I want, I want to customize it accordingly to my UI

This is the flutter switch button: -

Here is what I want: -

How can I make it possible for my UI?

解决方案

You can use package https://pub.dev/packages/custom_switch or fork it and modify to your

full code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange
      ),
      home: HomeScreen(),
    );
  }
}


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  bool status = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Switch Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomSwitch(
              activeColor: Colors.pinkAccent,
              value: status,
              onChanged: (value) {
                print("VALUE : $value");
                setState(() {
                  status = value;
                });
              },
            ),
            SizedBox(height: 12.0,),
            Text('Value : $status', style: TextStyle(
              color: Colors.black,
              fontSize: 20.0
            ),)
          ],
        ),
      ),
    );
  }
}

这篇关于如何在颤抖中自定义开关按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！