前提・実現したいこと
FlutterでAPIを呼び出して検索を行うアプリを作成しております。
入力ページにてキーワードを入力して、検索ボタン押下ごにAPIを呼出して、レスポンスを画面へ描写させたいです。
発生している問題・エラーメッセージ
検索ワードを入力後に検索ボタンを押下し、検索結果ページに遷移したところ、ヘッダーのみ表示され、検索結果が表示されません。
試したこと
検索を行う関数の前後にprintを記載するとprintの内容が表示されるので検索は行われているようなのですが、検索結果画面に遷移後すぐに検索結果を描写しないです。
検索結果画面を表示した状態で、ホットデプロイ(r)をすると、なぜか画面上に正しい検索結果が表示されます。
検索ボタン押下後、検索結果画面にて表示されず困っております。
どなたかアドバイスを頂けますと、大変助かります。
お手数ですがどうかよろしくお願い致します。
環境情報
Flutter 0.9.4 • channel beta
Xcode 10.0
vscode上のコンソールより「flutter run」コマンドにて起動
該当のソースコード
Dart
import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; void main() => runApp(new BaseApp()); class BaseApp extends StatelessWidget { Widget build(BuildContext context) { return new MaterialApp( title: 'API 検索画面', theme: new ThemeData( primarySwatch: Colors.pink, primaryColor: const Color(0xFFe91e63), accentColor: const Color(0xFFe91e63), canvasColor: const Color(0xFFfafafa), ), home: new SearchPage(), ); } } class SearchPage extends StatefulWidget { SearchPage({Key key}) : super(key: key); _SearchPageState createState() => new _SearchPageState(); } class _SearchPageState extends State<SearchPage> { final controller = TextEditingController(); Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Serch'), ), body: new Container( child: new TextField( controller:controller, style: new TextStyle( fontSize: 12.0, color: const Color(0xFF000000), fontWeight: FontWeight.w200, fontFamily: "Roboto"), decoration: InputDecoration( prefixIcon: Icon(Icons.search), labelText: "search"), ), padding: const EdgeInsets.all(0.0), alignment: Alignment.center, ), floatingActionButton: new FloatingActionButton( child: new Icon(Icons.add_circle), onPressed: fabPressed), ); } void fabPressed() { Navigator.push( context, MaterialPageRoute(builder: (context) => ResultPage(keyword: controller.text)), ); } } class ResultPage extends StatefulWidget { final String keyword; ResultPage({ this.keyword}); _ResultPageState createState() => new _ResultPageState(keyword: keyword); } class _ResultPageState extends State<ResultPage> { final String keyword; List<Widget> _items = <Widget>[]; _ResultPageState({ this.keyword}); void initState(){ super.initState(); _searchWords(this.keyword); } Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('検索結果'), ), body: new Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: _items, ), ); } void _searchWords(String searchWord) async { print('_searchWords:' + searchWord); final response = await http.get( 'https://apiXXXXXXXXXXXXXXXXXXXX?searchWord=' + searchWord); if (response.statusCode == 200) { List<Widget> list = []; Map<String, dynamic> decoded = json.decode(response.body); for (var item in decoded['items']) { list.add(Text(item['full_name'])); } _items = list.sublist(0, 2); } else { throw Exception('Fail to search'); } } }
まだ回答がついていません
会員登録して回答してみよう