質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

2895閲覧

FlutterにてAPIの検索結果が表示されない。

sdice

総合スコア12

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2018/10/28 09:44

編集2018/10/29 12:45

前提・実現したいこと

FlutterでAPIを呼び出して検索を行うアプリを作成しております。
入力ページにてキーワードを入力して、検索ボタン押下ごにAPIを呼出して、レスポンスを画面へ描写させたいです。

発生している問題・エラーメッセージ

検索ワードを入力後に検索ボタンを押下し、検索結果ページに遷移したところ、ヘッダーのみ表示され、検索結果が表示されません。

試したこと

検索を行う関数の前後にprintを記載するとprintの内容が表示されるので検索は行われているようなのですが、検索結果画面に遷移後すぐに検索結果を描写しないです。
検索結果画面を表示した状態で、ホットデプロイ(r)をすると、なぜか画面上に正しい検索結果が表示されます。

検索ボタン押下後、検索結果画面にて表示されず困っております。
どなたかアドバイスを頂けますと、大変助かります。
お手数ですがどうかよろしくお願い致します。

環境情報

Flutter 0.9.4 • channel beta
Xcode 10.0
vscode上のコンソールより「flutter run」コマンドにて起動

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:http/http.dart' as http; 3import 'dart:convert'; 4 5void main() => runApp(new BaseApp()); 6 7class BaseApp extends StatelessWidget { 8 9 Widget build(BuildContext context) { 10 return new MaterialApp( 11 title: 'API 検索画面', 12 theme: new ThemeData( 13 primarySwatch: Colors.pink, 14 primaryColor: const Color(0xFFe91e63), 15 accentColor: const Color(0xFFe91e63), 16 canvasColor: const Color(0xFFfafafa), 17 ), 18 home: new SearchPage(), 19 ); 20 } 21} 22 23class SearchPage extends StatefulWidget { 24 SearchPage({Key key}) : super(key: key); 25 26 27 _SearchPageState createState() => new _SearchPageState(); 28} 29 30class _SearchPageState extends State<SearchPage> { 31 32 final controller = TextEditingController(); 33 34 35 Widget build(BuildContext context) { 36 return new Scaffold( 37 appBar: new AppBar( 38 title: new Text('Serch'), 39 ), 40 body: new Container( 41 child: new TextField( 42 controller:controller, 43 style: new TextStyle( 44 fontSize: 12.0, 45 color: const Color(0xFF000000), 46 fontWeight: FontWeight.w200, 47 fontFamily: "Roboto"), 48 decoration: InputDecoration( 49 prefixIcon: Icon(Icons.search), 50 labelText: "search"), 51 ), 52 padding: const EdgeInsets.all(0.0), 53 alignment: Alignment.center, 54 ), 55 floatingActionButton: new FloatingActionButton( 56 child: new Icon(Icons.add_circle), onPressed: fabPressed), 57 ); 58 } 59 60 void fabPressed() { 61 Navigator.push( 62 context, 63 MaterialPageRoute(builder: (context) => ResultPage(keyword: controller.text)), 64 ); 65 } 66 67} 68 69class ResultPage extends StatefulWidget { 70 final String keyword; 71 ResultPage({ this.keyword}); 72 73 74 _ResultPageState createState() => new _ResultPageState(keyword: keyword); 75} 76 77class _ResultPageState extends State<ResultPage> { 78 79 final String keyword; 80 81 List<Widget> _items = <Widget>[]; 82 83 _ResultPageState({ this.keyword}); 84 85 86 void initState(){ 87 super.initState(); 88 _searchWords(this.keyword); 89 90 } 91 92 93 Widget build(BuildContext context) { 94 95 return new Scaffold( 96 appBar: new AppBar( 97 title: new Text('検索結果'), 98 ), 99 body: new Column( 100 mainAxisAlignment: MainAxisAlignment.start, 101 mainAxisSize: MainAxisSize.max, 102 crossAxisAlignment: CrossAxisAlignment.center, 103 children: _items, 104 ), 105 ); 106 } 107 108 void _searchWords(String searchWord) async { 109 print('_searchWords:' + searchWord); 110 final response = await http.get( 111 'https://apiXXXXXXXXXXXXXXXXXXXX?searchWord=' + searchWord); 112 if (response.statusCode == 200) { 113 List<Widget> list = []; 114 Map<String, dynamic> decoded = json.decode(response.body); 115 for (var item in decoded['items']) { 116 list.add(Text(item['full_name'])); 117 } 118 _items = list.sublist(0, 2); 119 } else { 120 throw Exception('Fail to search'); 121 } 122 } 123} 124

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

非同期メソッドの内部でsetStateの宣言の記載が漏れておりました。
下記の構文を追加したら想定の動作が行われました。

dart

1 setState(() { 2 _items = list; 3 });

投稿2018/10/29 15:58

sdice

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問