flutter - 如何在 statefulWidget 中使用 flutter provider？

标签 flutter flutter-provider

我正在使用 flutter_provider 进行状态管理。我想从 Api 加载页面(statefulwidget)上的一些项目。我在页面开始时显示加载程序，并希望在获取项目后显示它们。

播放列表.dart - 

class Playlist extends StatefulWidget {
  @override
  _PlaylistState createState() => _PlaylistState();
}

class _PlaylistState extends State<Playlist> {
var videosState;
  @override
  void initState() {
    super.initState();
     videosState = Provider.of<VideosProvider>(context);
    videosState.fetchVideosList();
  }

  @override
  Widget build(BuildContext context) {
    var videos = videosState.playlist;
    return Scaffold(
      appBar: AppBar(
        title: Text('My Videos'),
      ),
      body: RefreshIndicator(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: videos.length
              ? ListView.builder(
                  itemBuilder: (BuildContext context, index) {
                    return _videoListItem(context, index, videos, videosState);
                  },
                  itemCount: videos.length,
                )
              : Center(
                  child: CircularProgressIndicator(),
                ),
        ),
        onRefresh: () => null,
      ),
    );
  }
}

我的供应商是这样的-

class VideosProvider with ChangeNotifier {

  List _playlist;
  int _currentVideoId;  
  get playlist => _playlist;

  void setPlayList(videosList) {
    _playlist = videosList;
  }

  Future fetchVideosList() async {
    http.Response response =
        await http.get("http://192.168.1.22:3000/videos-list/");

    print(json.decode(response.body));
    videos = json.decode(response.body)["data"];
    setPlayList(videos);
    return videos;
  }
}

这给出了一个错误 - 

inheritFromWidgetOfExactType(_Provider<VideosProvider>) or inheritFromElement() was called before _PlaylistState.initState() completed.

这里是 playList 类的父类的构建方法，包裹在一个 changenotifier 中，

Widget build(BuildContext context) {
    return ChangeNotifierProvider<VideosProvider>(
      builder: (BuildContext context) => VideosProvider(),
      child: MaterialApp(
        title: "My App",
        home: new Playlist(),
      ),
    );
  }

因此，互联网上关于 flutter_provider 的所有示例都显示了 statelesswidget 上 provider 的使用，其中状态更改发生在用户交互(如按钮单击)上。没有关于如何在 statefulWidget 中使用提供程序，以及必须在页面加载时更新数据而无需任何交互的情况。

我知道这种情况下有 streambuilder 和 futurebuilder，但我想了解如何使用 flutter_provider 来完成。如何使用提供程序在 initState(在页面加载时)调用 fetchVideosList？这种情况是否可以/应该使用 statelessWidget 来处理？

最佳答案

Does this case can/should be handled with a statelessWidget?

答案是:不，不是

我是 StatefulWidget + Provider 的重度用户。我总是使用这种模式来显示包含字段的表单，这些字段可供将来编辑或输入。

更新时间:2020 年 2 月 9 日

关于 Maks 的评论，我分享了使用 didChangeDependencies 管理提供者的更好方法。

Demo

你可以查看这个github repository

ma​​in.dart

  1. 第一步

在 ChangeNotifierProvider 中启动 PlayListScreen

class PlaylistScreenProvider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<VideosProvider>(
      create: (_) {
        return VideosProvider();
      },
      child: PlaylistScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Go To StatefulWidget Screen"),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (_) {
                  return PlaylistScreenProvider();
                },
              ),
            );
          },
        ),
      ),
    );
  }
}
  1. 第二步

将 PlaylistScreen 作为有状态的 Widget 来保存 TextEditingContoller 和其他值。

playlistScreen.dart

class PlaylistScreen extends StatefulWidget {
  @override
  _PlaylistScreenState createState() => _PlaylistScreenState();
}

class _PlaylistScreenState extends State<PlaylistScreen> {
  List _playlistList;
  String _errorMessage;
  Stage _stage;

  final _searchTextCtrl = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _searchTextCtrl.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final videosState = Provider.of<VideosProvider>(context);
    _playlistList = videosState.playlist;
    _stage = videosState.stage;
    _errorMessage = videosState.errorMessage;
  }

  void actionSearch() {
    String text = _searchTextCtrl.value.text;
    Provider.of<VideosProvider>(context, listen: false)
        .updateCurrentVideoId(text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Videos'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          children: <Widget>[
            Container(
              child: RaisedButton.icon(
                icon: Icon(Icons.search),
                label: Text("Filter"),
                onPressed: () {
                  actionSearch();
                },
              ),
            ),
            Container(
              child: TextField(
                controller: _searchTextCtrl,
                onSubmitted: (value) {
                  actionSearch();
                },
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Please input 1 or 2',
                ),
              ),
            ),
            Flexible(
              child: _stage == Stage.DONE
                  ? PlaylistTree(_playlistList)
                  : _stage == Stage.ERROR
                      ? Center(child: Text("$_errorMessage"))
                      : Center(
                          child: CircularProgressIndicator(),
                        ),
            )
          ],
        ),
      ),
    );
  }
}

class PlaylistTree extends StatelessWidget {
  PlaylistTree(this.playlistList);

  final List playlistList;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: playlistList.length,
      itemBuilder: (context, index) {
        var data = playlistList[index];
        return Container(
          child: Text("${data['id']} - ${data['first_name']}"),
        );
      },
    );
  }
}
  1. 最后一步

让提供者处理业务逻辑

videosProvider.dart

enum Stage { ERROR, LOADING, DONE }

class VideosProvider with ChangeNotifier {
  String errorMessage = "Network Error";
  Stage stage;
  List _playlist;
  int _currentVideoId;

  VideosProvider() {
    this.stage = Stage.LOADING;
    initScreen();
  }

  void initScreen() async {
    try {
      await fetchVideosList();
      stage = Stage.DONE;
    } catch (e) {
      stage = Stage.ERROR;
    }
    notifyListeners();
  }

  List get playlist => _playlist;

  void setPlayList(videosList) {
    _playlist = videosList;
  }

  void validateInput(String valueText) {
    if (valueText == ""){
      this._currentVideoId = null;
      return;
    }
    try {
      int valueInt = int.parse(valueText);
      if (valueInt == 1 || valueInt == 2){
        this._currentVideoId = valueInt;
      }
      else {
        this.errorMessage = "Use only 1 and 2";
        throw 1;
      }
    } on FormatException catch (e) {
      this.errorMessage = "Must be a number";
      throw 1;
    }
  }

  void updateCurrentVideoId(String value) async {
    this.stage = Stage.LOADING;
    notifyListeners();

    try {
      validateInput(value);
      await fetchVideosList();
      stage = Stage.DONE;
    } on SocketException catch (e) {
      this.errorMessage = "Network Error";
      stage = Stage.ERROR;
    } catch (e) {
      stage = Stage.ERROR;
    }
    notifyListeners();
  }

  Future fetchVideosList() async {
    String url;
    if (_currentVideoId != null) {
      url = "https://reqres.in/api/users?page=$_currentVideoId";
    } else {
      url = "https://reqres.in/api/users";
    }
    http.Response response = await http.get(url);
    var videosList = json.decode(response.body)["data"];
    setPlayList(videosList);
  }
}

旧答案:2019 年 8 月 19 日

以我为例:

form_screen.dart

class Form extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<FormProvider>(
      builder: (_) {
        return FormProvider(id: ...); // Passing Provider to child widget
      },
      child: FormWidget(), // So Provider.of<FormProvider>(context) can be read here
    );
  }
}


class FormWidget extends StatefulWidget {
  @override
  _FormWidgetState createState() => _FormWidgetState();
}

class _FormWidgetState extends State<FormWidget> {
  final _formKey = GlobalKey<FormState>();

  // No need to override initState like your code

  @override
  Widget build(BuildContext context) {
    var formState = Provider.of<FormProvider>(context) // access any provided data
    return Form(
      key: _formKey,
      child: ....
    );
  }
}

FormProvider 作为一个类，需要从 API 更新它们的最新值。因此，最初，它会请求一些 URL 并更新相应的值。

form_provider.dart

class FormProvider with ChangeNotifier {
  DocumentModel document;
  int id;

  FormProvider({@required int id}) {
    this.id = id;
    initFormFields(); // will perform network request
  }

  void initFormFields() async {
    Map results = initializeDataFromApi(id: id);
    try {
      document = DocumentModel.fromJson(results['data']);
    } catch (e) {
      // Handle Exceptions
    }
    notifyListeners(); // triggers FormWidget to re-execute build method for second time
  }

在你的情况下:

播放列表.dart

class PlaylistScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<VideosProvider>(
      builder: (_) {
        return VideosProvider(); // execute construct method and fetchVideosList asynchronously
      },
      child: Playlist(),
    );
  }
}


class Playlist extends StatefulWidget {
  @override
  _PlaylistState createState() => _PlaylistState();
}

class _PlaylistState extends State<Playlist> {
  final _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    // We *moved* this to build method
    // videosState = Provider.of<VideosProvider>(context);

    // We *moved* this to constructor method in provider
    // videosState.fetchVideosList();
  }

  @override
  Widget build(BuildContext context) {
    // Moved from initState
    var videosState = Provider.of<VideosProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('My Videos'),
      ),
      body: RefreshIndicator(
  }
}

provider.dart

class VideosProvider with ChangeNotifier {

  VideosProvider() {
    // *moved* from Playlist.initState()
    fetchVideosList(); // will perform network request
  }

  List _playlist;
  int _currentVideoId;  
  get playlist => _playlist;

  void setPlayList(videosList) {
    _playlist = videosList;
  }

  Future fetchVideosList() async {
    http.Response response =
        await http.get("http://192.168.1.22:3000/videos-list/");

    print(json.decode(response.body));
    videos = json.decode(response.body)["data"];
    setPlayList(videos);
    // return videos; // no need to return

    // We need to notify Playlist widget to rebuild itself for second time
    notifyListeners(); // mandatory
  }
}

关于flutter - 如何在 statefulWidget 中使用 flutter provider？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56691331/

上一篇：flutter - 如何使变量成为最终变量并在 initState() 中为其赋值

下一篇：flutter - 卡片小部件内的 ListView 未使用列布局显示在屏幕上

相关文章：

dart - 错误 : Only static members can be accessed in initializers what does this mean?

flutter - 静态打字 hell

flutter - WillPopScope 我应该在 Navigator.pop 之后使用 return Future.value(true)

flutter - 在包含导航流的Flutter中，此Y小部件上方找不到正确的Provider <X>

flutter - 提供程序重建小部件，但直到 "Hot restart"才显示任何内容

flutter - Provider中的监听器如何在Flutter中工作？

调用 pushReplacement 后 Flutter StreamProvider 未更新

flutter - 通常由 TextField 创建的 InputDecorator 不能具有无限宽度

flutter - 如何实现自行车轮滚动列表小部件

flutter - 使用提供程序全局更改字体大小

©2024 IT工具网  联系我们