颤振 - 使用提供者全局更改字体大小

Question

我正在尝试在我的颤振应用程序中使用提供程序来允许用户更改某些小部件的字体大小。

我正在遵循 github.com/flutter/samples/blob/master/provider_counter/lib/main.dart 中描述的方法，但字体大小没有改变。

我有一个显示加号和减号按钮的 UI 小部件：

import "package:flutter/material.dart";
import './size_controller.dart';
import 'package:provider/provider.dart';


class TypeSize extends StatelessWidget {


  final _standardSize = 20.0;

  @override

  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: Row(
        children: <Widget>[
          Text(
            "Change type size: ",
            style: TextStyle(fontSize: _standardSize),
          ),
          ButtonTheme(
              minWidth: 50,
              child: RaisedButton(
                onPressed: () {
                  if (_standardSize < 23.0) {
                    Provider.of<FontSizeController>(context, listen: false).increment(_standardSize);
                  }
                },
                child: Text(
                  "+", style: TextStyle(
                    color: Colors.white,
                    fontSize: 30),
                  ),
                color: Colors.green,
              ),
            ),
          ButtonTheme(
            minWidth: 50,
            child: RaisedButton(
              onPressed: () {
                if (_standardSize > 20.0) {
                    Provider.of<FontSizeController>(context, listen: false).decrement(_standardSize);
                }
              },
              child: Text(
                "-", style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  ),
                ),
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }
}

FontSizeController 看起来像这样：

import 'package:flutter/material.dart';

class FontSizeController with ChangeNotifier {

  double value = 20.0;

  void increment(value) {
    value ++;
    notifyListeners();
  }

  void decrement(value) {
    value --;
    notifyListeners();
  }

}

最后我要更改的小部件如下所示：

import 'package:flutter/material.dart';
// import 'package:wfa_ambo_bloc/main.dart';
import 'package:provider/provider.dart';
import '../controllers/size_controller.dart';

class Comfort extends StatefulWidget {
  @override
  _ComfortState createState() => _ComfortState();
}

class _ComfortState extends State<Comfort> {

  int _comfortSliderValue = 3;
  // double _standardSize = 20;

  @override

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 40),
      child: Column(
      children: <Widget>[
        Align(
          alignment: Alignment.centerLeft,
          child: ChangeNotifierProvider(
            create: (context) => FontSizeController(),
            child: Container(
              padding: EdgeInsets.all(20.0),
              child: Consumer<FontSizeController>(
                builder: (
                  context, 
                  sizeController, 
                  child) => Text(
                    "How comfortable was your journey?",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontWeight: FontWeight.w400,
                    fontFamily: "Roboto",
                    letterSpacing: 0.5,
                      fontSize: sizeController.value,
                    ),
                  ),
                ),
              ),
            ),
          ),
... etc

单击按钮时什么都没有发生。有人可以帮忙吗？

我试图适应的示例都包含在 main() 中，但我已经分离出我的小部件以尝试使所有内容更清洁 - 这就是造成差异的原因吗？

Answer 1

无需在您的小部件中使用变量（删除_standardSize）。

只需保留 ChangeNotifier 中的值并直接使用它（通过 getter）：

import 'package:flutter/material.dart';

class FontSizeController with ChangeNotifier {

  double _value = 20.0;

  int get value => _value;

  void increment() {
    _value++;
    notifyListeners();
  }

  void decrement() {
    _value--;
    notifyListeners();
  }

}

然后在加号和减号按钮上，只需从您的ChangeNotifier 增加或减少值：

// on plus button pressed
Provider.of<FontSizeController>(context, listen: false).increment();

// on minus button pressed
Provider.of<FontSizeController>(context, listen: false).decrement();

最后在您希望调整文本大小的小部件中：

fontSize: Provider.of<FontSizeController>(context, listen: true).value