如何在 statefulWidget 中使用颤振提供程序？

Question

我正在使用 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 中使用 provider，以及必须在页面加载时更新数据而无需任何交互的情况。

我知道用于这种场景的 streambuilder 和 futurebuilder，但想了解如何使用 flutter_provider 来完成。如何使用提供程序在 initState（页面加载时）中调用 fetchVideosList？这种情况可以/应该用 statelessWidget 处理吗？

Answer 1

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

The answer is : No, it does not

I am heavy user of StatefulWidget + Provider. I always use this pattern for displaying a Form which contains fields, that available for future edit or input.

Updated : February 9 2020

Regarding to Maks comment, I shared better way to manage provider using didChangeDependencies.

You may check to this github repository

main.dart

1. First Step

Initiate PlayListScreen inside ChangeNotifierProvider

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();
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

2. Second Step

Make PlaylistScreen as Stateful Widget to hold TextEditingContoller and other values.

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']}"),
        );
      },
    );
  }
}

3. Last Step

make provider to handle Business Logic

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);
  }
}

Old answer : Aug 19 2019

In my case :

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 as a class, need to update their latest value from API. So, initially, it will request to some URL and updates corresponding values.

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
  }

In your case :

PlayList.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
  }
}

Answer 2

使用 Provider 进行状态管理时，不需要使用 StatefullWidget，那么如何在应用程序启动时调用 ChangeNotifier 的方法呢？

您可以在 ChangeNotifier 的构造函数中简单地执行此操作，以便当您将 VideosProvider() 指向 ChangeNotifierProvider Builder 时，构造函数将在提供者第一次构造 VideosProvider 时被调用，因此：

播放列表.dart：

class Playlist extends StatelessWidget {

@override
Widget build(BuildContext context) {
  final videosState = Provider.of<VideosProvider>(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,
    ),
  );

} }

VideosProvider.dart：

class VideosProvider with ChangeNotifier {

  VideosProvider(){
    fetchVideosList();
  }

  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;
 }

}

Answer 3

使用 Provider 时，您\xe2\x80\x99t 不需要使用StatefulWidget（根据 Flutter 团队的教程）状态管理

\n

您可以使用以下教程来了解如何使用提供程序和\nStatelessWidget获取数据：Flutter StateManagement with\xc2\xa0Provider

\n