Flutter 如何使用 JSON 从 Rest API 获取 List<String> _list 数组字符串

Posted 2023-02-23

【中文标题】Flutter 如何使用 JSON 从 Rest API 获取 List<String> _list 数组字符串

【英文标题】：Flutter How to get List<String> _list Array strings from Rest API using JSON

【发布时间】：2021-06-25 19:41:11

【问题描述】：

我是 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),
        );
      ,
    );
  

【参考方案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>();

【讨论】：

List stringList = (jsonDecode(response) as List).cast(); -- 此行抛出错误参数类型'Response' 不能分配给参数类型'String'