如何在 flutter 中使用 provider

Question

如何在flutter中使用provider....

http: ^0.13.1
provider: ^5.0.0

http 测试通过

import 'package:flutter/material.dart';
import 'package:flutter_movie/src/Home.dart';
import 'package:flutter_movie/src/movie_info.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<MovieInfo>(create: (_) => MovieInfo()),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home(),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_movie/model/movies.dart';
import 'package:flutter_movie/selectPage.dart';
import 'package:flutter_movie/src/movie_info.dart';
import 'package:provider/provider.dart';


class Home extends StatefulWidget {

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

class _HomeState extends State<Home> {

  Future<Movies> data;
  MovieInfo movieInfo;

  @override
  void initState() {
    super.initState();

    Provider.of<MovieInfo>(context, listen: false).fetchData();

  }



  @override
  Widget build(BuildContext context) {
    MovieInfo movieInfo = Provider.of<MovieInfo>(context);
    Movies result = movieInfo.result;

    return Scaffold(
      drawer: Drawer(
        child: Container(
          color: Colors.blueGrey,
          child: ListView(
            padding: EdgeInsets.only(top: 0.0),
            children: <Widget>[
              ListTile(
                title: Text('Dashboard'),
              ),
              ListTile(
                title: Text('Submit Reports'),
              ),
              ListTile(
                title: Text('Inbox Requests'),
              ),
            ],
          ),
        ),
      ),
      appBar: AppBar(
        title: Text('영화 정보 검색기'),
        backgroundColor: Colors.blueGrey,
        leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
        actions: <Widget>[
          //    IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.help), onPressed: () {}),
        ],
        bottom: PreferredSize(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 16.0),
            child: Container(
              margin: EdgeInsets.only(left: 16.0),
            ),
          ),
          preferredSize: Size(0.0, 30.0),
        ),
      ),
      body: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: Column(
          children: <Widget>[
            TextField(
              controller: movieInfo.myController,
              onChanged: (text) {
                setState(() {
                  movieInfo.filteredItems.clear();
                  movieInfo.filteredItems.addAll(result.results
                      .where((item) => item.title.contains(text)));
                });
              },
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                border: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.white),
                    borderRadius: BorderRadius.circular(40)),
                labelText: '검색',
              ),
            ),
            Expanded(
              child: GridView.count(
                  crossAxisCount: 3,
                  childAspectRatio: 2 / 3.5,
                  children: result == null ? [] : _buildShow(),
              ),
            ),
          ],
        ),
      ),
    );
  }


  Widget _buildItem(Results movies) {
    return InkWell(
      child: Card(
        color: Colors.blueGrey,
        margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        child: Column(
          children: [
            Image.network('https://image.tmdb.org/t/p/w500/${movies.posterPath}'),
            Text('${movies.title}', style: TextStyle(height: 1.5, fontSize: 15, fontWeight: FontWeight.bold),),
          ],
        ),
      ),
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => DetailScreen(movie: movies),
          ),
        );
      },
    );
  }


  List<Widget> _buildShow() {
    if (movieInfo.myController.text.isEmpty) {
      return movieInfo.result.results.map((movies) => _buildItem(movies)).toList();
    }
    return movieInfo.filteredItems.map((e) => _buildItem(e)).toList();
  }
}

出了点问题.... 先看不到电影列表..

import 'package:flutter/material.dart';
import 'package:flutter_movie/model/movies.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class MovieInfo extends ChangeNotifier {
  Movies _result;

  Movies get result => _result;

  final myController = TextEditingController();
  final List<Results> filteredItems = [];

  Future<Movies> fetchData() async {
    var url = Uri.parse(
        'https://api.themoviedb.org/3/movie/upcoming?api_key=&language=ko-KR&page=1');
    var response = await http.get(url);


    Movies result = Movies.fromJson(json.decode(response.body));
    notifyListeners();
    return result;


  }


}

在我安装提供商之前，运行良好但是，当我尝试将 put provider 放在第一页时看不到列表，当我尝试将文本放入文本字段时，它说结果为空....

杰森

{
    "dates": {
        "maximum": "2021-05-24",
        "minimum": "2021-05-07"
    },
    "page": 1,
    "results": [
        {
            "adult": false,
            "backdrop_path": "",
            "genre_ids": [
                14,
                28,
                12,
                878,
                53
            ],
            "id": 460465,
            "original_language": "en",
            "original_title": "",
            "overview": "",
            "popularity": 6983.02,
            "poster_path": "",
            "release_date": "2021-04-07",
            "title": "모탈 컴뱃",
            "video": false,
            "vote_average": 7.9,
            "vote_count": 1810
        },

想在结果中使用数据..

Answer 1

 class MovieInfo extends ChangeNotifier {
  Movies _result;

  Movies get result => _result;

  final myController = TextEditingController();
  final List<Results> filteredItems = [];

  Future<void> fetchData() async {
    var url = Uri.parse(
        'https://api.themoviedb.org/3/movie/upcoming?api_key=&language=ko-KR&page=1');
    var response = await http.get(url);
    Movies result = Movies.fromJson(json.decode(response.body));
    this.result = result;
    notifyListeners();
  }
}

然后访问结果。

如何在 flutter 中使用 provider

how to use provider in flutter

provider

dart

flutter