flutter - 按下按钮获取数据

Question

我正在尝试学习Flutter，并且尝试从官方文档中的this示例中提出一个http请求，但是由于我正在学习，因此我想尝试一下并进行更改，因此添加了一个文本字段和一个我可以在其中输入相册ID的按钮，而不是总是获取带有ID:1的相册，而是尝试输入ID并按“获取相册”按钮以显示具有该特定ID的相册。
很抱歉显示所有代码，但我认为这可能对我尝试做的事情有所帮助。

另一个问题是该代码显示数据是通过initState提取的，但是我尝试创建另一个函数，该函数在按下按钮但不起作用时会被调用，因为我对Flutter不太熟悉。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_app/album.dart';

Future<Album> fetchAlbums() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/albums/1');
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = TextEditingController();

  Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbums();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Container(
          child: ListView(
        children: <Widget>[
          Stack(
            alignment: const Alignment(1.0, 1.0),
            children: <Widget>[
              TextField(
                controller: _controller,
                decoration: InputDecoration(hintText: 'Enter album ID...'),
              ),
              FlatButton(
                onPressed: () {
                  _controller.clear();
                },
                child: Icon(Icons.clear),
              ),
            ],
          ),
          RaisedButton(
            onPressed: null,
            child: Text('Get Album', style: TextStyle(fontSize: 20)),
          ),
          Column(
            children: <Widget>[
              Center(
                child: FutureBuilder<Album>(
                  future: futureAlbum,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(snapshot.data.title);
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }
                    // By default, show a loading spinner.
                    return CircularProgressIndicator();
                  },
                ),
              ),
            ],
          ),
        ],
      )),
    );
  }
}

样本数据为:

[
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "omnis laborum odio"
  },
 ]

更新:

// First I modified the Future, not it get an albumId
Future<Album> fetchAlbums(int albumId) async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/albums/$albumId');
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

// futureAlbum is updated when the button is pressed and not in initState
onGetAlbum() {
  futureAlbum = fetchAlbums(int.parse(_controller.text));
}

// The raised button, instead of null not calls the onGetAlbum() method when is pressed.
  RaisedButton(
    onPressed: () => onGetAlbum(),
    child: Text('Get Album', style: TextStyle(fontSize: 20)),
  ),

我现在得到的错误:

W/IInputConnectionWrapper( 3266): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper( 3266): getSelectedText on inactive InputConnection   
W/IInputConnectionWrapper( 3266): getTextAfterCursor on inactive InputConnectionW/IInputConnectionWrapper( 3266): beginBatchEdit on inactive InputConnectionW/IInputConnectionWrapper( 3266): endBatchEdit on inactive InputConnection

Answer 1

因此，经过将近一天的时间，我解决了我的问题并学到了更多的 Dart 知识，我的问题虽然很容易，但是当您是初学者时就是这样。

除了问题更新之外，我还必须进行以下更改:

RaisedButton(
            onPressed: () {
              futureAlbum = fetchAlbums(int.parse(_controller.text));
              if (_controller.text.length > 0) {
                this.setState(() {
                  _controller.clear(); // Clear value
                }); // clear the textField
                FocusScope.of(context)
                    .requestFocus(new FocusNode()); // hide the keyboard
              }
            },
            child: Text('Get Album', style: TextStyle(fontSize: 20)),
          ),