json - Flutter 如何获取列表_list 使用 JSON 的来自 Rest API 的数组字符串

Question

我是 Flutter 的新手，我想从我的 mysql 中获取数据，以及如何从我的 mysql 数据库中获取 'Facebook'、'Twitter'、'Youtube' 的数据？

我想从我的 mysql 数据中将数据加载到 _tags1 小部件中。

 final List<String> _list = [ 'Facebook',  'Twitter', 'Youtube'];

_list 数组值应该来自我的 mysql 数据。

这是我的完整代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_tags/flutter_tags.dart';



void main() => runApp(MyApp());


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tags Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: MyHomePage(title: 'Flutter Tags'),
    );
  }
}



class _MyHomePageState extends State<MyHomePage>{


  bool _symmetry = false;
  bool _removeButton = true;
  bool _singleItem = true;
  bool _startDirection = false;
  bool _horizontalScroll = true;
  int _column = 0;
  double _fontSize = 14;


  List _icon = [Icons.home, Icons.language, Icons.headset];

  @override
  void initState() {
    super.initState();
    _items = _list.toList();
  }
  List _items;


  final List<String> _list = [ 'Facebook',  'Twitter', 'Youtube'];

  final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();



  @override
  Widget build(BuildContext context) {

    return Scaffold(
          body: SafeArea(
             child: Container(
                child:  _tags1,
              )
          )
              );
  }

  Widget get _tags1 {
    return Tags(
      key: _tagStateKey,
      symmetry: _symmetry,
      columns: _column,
      horizontalScroll: _horizontalScroll,
      //verticalDirection: VerticalDirection.up, textDirection: TextDirection.rtl,
      heightHorizontalScroll: 60 * (_fontSize / 14),
      itemCount: _items.length,
      itemBuilder: (index) {
        final item = _items[index];

        return ItemTags(
          key: Key(index.toString()),
          index: index,
          title: item,
          pressEnabled: true,
          activeColor: Colors.blueGrey[600],
          singleItem: _singleItem,
          splashColor: Colors.green,
          combine: ItemTagsCombine.withTextBefore,
          image: index > 0 && index < 5
              ? ItemTagsImage(
            //image: AssetImage("img/p$index.jpg"),
              child: Image.network(
                "http://www.clipartpanda.com/clipart_images/user-66327738/download",
                width: 16 * _fontSize / 14,
                height: 16 * _fontSize / 14,
              ))
              : (1 == 1
              ? ItemTagsImage(
            image: NetworkImage(
                "https://d32ogoqmya1dw8.cloudfront.net/images/serc/empty_user_icon_256.v2.png"),
          )
              : null),
          icon: (item == '0' || item == '1' || item == '2')
              ? ItemTagsIcon(
            icon: _icon[int.parse(item)],
          )
              : null,
          removeButton: _removeButton
              ? ItemTagsRemoveButton(
            onRemoved: () {
              setState(() {
                _items.removeAt(index);
              });
              return true;
            },
          )
              : null,
          textScaleFactor:
          utf8.encode(item.substring(0, 1)).length > 2 ? 0.8 : 1,
          textStyle: TextStyle(
            fontSize: _fontSize,
          ),
          onPressed: (item) => print(item),
        );
      },
    );
  }



}

标签： jsonapirestflutterdictionary

Answer 1

您需要在 API 端点上执行 Get 请求。此端点将返回您的 JSON 和您的字符串列表。收到后，需要将json解码到你的List中。这是一个例子：

// Getting API Data using Dio package:
var response = await dio.get(yourApiUrl);

//parsing your json to string list
List<String> stringList = (jsonDecode(response) as List<dynamic>).cast<String>();