如何更改不使用颤动按钮的状态以及颤动传感器的问题

Question

我可以问更多吗？如果我想创建一个应用程序，比如抬头，我需要正确使用陀螺仪的传感器。

我需要在这段代码中使用传感器，所以我要添加到这段代码中。请帮我解决这个问题我是颤振的新手所以我需要使用三元运算符？

flutter 可以在 Container 或 padding 中设置状态吗？

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

class GameGuessWord extends StatefulWidget {
  @override
  _GameGuessWordState createState() => _GameGuessWordState();
}

class _GameGuessWordState extends State<GameGuessWord> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo[900],
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(
                top: (MediaQuery.of(context).size.height) / 2 - 60),
            child: Text(
              'FootBall',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 100,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin:
                EdgeInsets.only(top: (MediaQuery.of(context).size.height / 8)),
            padding: EdgeInsets.all(10),
            child: Center(
              child: Container(
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.amber[700],
                ),
                child: Text(
                  '60',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

这是本页的输出 enter image description here

Answer 1

你对一个项目有一个非常有趣的想法。我可以提供一些关于如何实现它的线索。

首先，通过sensor包，可以通过3BroadcastStream来收听phone的方向：accelerometerEvents，userAccelerometerEvents，和 gyroscopeEvents。考虑到这一点，我们可以监听 initState() 中的变化（特别是 x、y 和 z 值），然后操纵基于 UI在他们身上。

为了更好地演示，我在这里有一个完整的工作示例，通过首先将方向设置为 Landscape（用于简单演示），仅使用 accelerometer 值来更改应用程序的背景，然后收听 z 值。您也可以操纵文本和其他值来创建 Heads Up！你自己的游戏！以下是代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sensors/sensors.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
  ]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: GameGuessWord(),
    );
  }
}

class GameGuessWord extends StatefulWidget {
  @override
  _GameGuessWordState createState() => _GameGuessWordState();
}

class _GameGuessWordState extends State<GameGuessWord> {
  Color _backgroundColor = Colors.indigo;

  /// Upright: [-10, 0, 0]
  /// Tilt forward: [0, 0, -10]
  /// Tilt backward: [0, 0, 10]

  @override
  void initState() {
    super.initState();
    accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        // Manipulate the UI here, something like:
        if (event.z < -6) {
          _backgroundColor = Colors.green;
        } else if (event.z > 6) {
          _backgroundColor = Colors.red;
        } else {
          _backgroundColor = Colors.indigo;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(
                top: (MediaQuery.of(context).size.height) / 2 - 60),
            child: Text(
              'FootBall',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 100,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin:
                EdgeInsets.only(top: (MediaQuery.of(context).size.height / 8)),
            padding: EdgeInsets.all(10),
            child: Center(
              child: Container(
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.amber[700],
                ),
                child: Text(
                  '60',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如何更改不使用颤动按钮的状态以及颤动传感器的问题

How can I change the state not using button in flutter and problem with flutter sensor

android-sensors

dart

flutter