Question

我正在构建一个Flutter应用程序，并希望创建一个自定义滑块，其表情符号与反射应用程序非常相似。我附上了屏幕截图，当您更改滑块时，表情符号也会更改。我很陌生，并且正在为滑块小部件苦苦挣扎

Answer 1

您可以执行以下操作：

我没有将图像用于表情符号面孔，但是可以使您朝正确的方向前进。

完整代码：

import 'package:flutter/material.dart';

const _emojis = ['','','','','',''];

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(
            gradient: new LinearGradient(
                colors: [Colors.teal, Colors.tealAccent],
                begin: Alignment.bottomLeft,
                end: Alignment.topRight
            )
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '${_emojis[_value.toInt()]}',
                style: Theme.of(context).textTheme.display1,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(_emojis[0], softWrap: true),
                      Expanded(
                        child: Slider(
                          value: _value,
                          //label: _emojis[_value.toInt()],
                          min: 0.0,
                          max: 5.0,
                          divisions: 5,

                          onChangeStart: (double value) {
                            print('Start value is ' + value.toString());
                          },
                          onChangeEnd: (double value) {
                            print('Finish value is ' + value.toString());
                          },
                          onChanged: (double value) {
                            setState(() {
                              _value = value;
                            });
                          },
                          activeColor: Colors.white,
                          inactiveColor: Colors.black45,
                        ),
                      ),
                      Text(_emojis[5], softWrap: true,)
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

This reviewpage animation接近反射动画的90％。

带有表情符号的自定义滑块

2 个答案: