preface

Today, when I was doing the imitation digging project, I couldn’t adjust the interface. I looked at the interface now used by digging gold and was not the same as before (and there was no interface document), so I wanted to directly render the data of moke digging gold. The project has been put on Github, welcome to check

Today’s goal is to render the classification onto the page

Preparation Steps:

  • Copy the desired JSON data directly from the nuggets
  • Declare JSON data
  • Dart retrieves JSON data
  • To render the page

Copy the desired JSON data from the interface

Declare JSON data

Declaring JSON data requires declaring JSON in a pubspec.yml file, as shown below

  assets:
    - assets/json/categories.json
Copy the code

Run the following command to update the data

flutter packages get
Copy the code

Dart retrieves JSON data

I did a Baidu search here and found two ways

  • Get it directly from the widget
  • In the initState method

Get the data directly from the widget and render the page

FutureBuild is required, and the json data is obtained using DefaultAssetBundle. The main code is as follows

FutureBuilder( future: DefaultAssetBundle.of(context) .loadString('assets/json/categories.json'), builder: (context, snapshot) { if (snapshot.hasData) { _tabList = json.decode(snapshot.data.toString()) as List; Return TabBar(// generates Tab menu isScrollable: true, // can scroll controller: _tabController, labelColor: PrimaryColor, unselectedLabelColor: firstColor, labelStyle: TextStyle(fontSize: 12.0), tabs: _tabList .map((e) => Tab( text: e['category_name'], )) .toList()); } else if (snapshot.hasError) { return Text('error>>>>>>>>>>>>:${snapshot.error}'); } return new Container(color: new color.fromrgbo (244, 245, 245, 1.0),); }),Copy the code

In the initState method

Load json data using the rootbundle.loadString () method

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    rootBundle
        .loadString("assets/json/categories.json")
        .then((value) => {_tabList = json.decode(value)});
    _tabController = TabController(
        length: _tabList.length,
        vsync: this); 
  }
Copy the code

Page rendering

Return Scaffold(appBar: TabBar(Controller: _tabController, isScrollable: true, // Scrollable labelColor: PrimaryColor, unselectedLabelColor: firstColor, labelStyle: TextStyle(fontSize: 12.0), tabs: _tabList .map((e) => Tab( text: e['category_name'], )) .toList()), body: new TabBarView( controller: _tabController, children: _tablist.map ((e) {// Create three Tab pages return Container(alignment: alignment. Center, child: Text(e['category_url'], textScaleFactor: 5), ); }).toList(), ), );Copy the code

The complete page code is as follows

import 'dart:convert'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_application/config/theme.dart'; class IndexPage extends StatefulWidget { _IndexState createState() => _IndexState(); } class _IndexState extends State<IndexPage> with TickerProviderStateMixin { late TabController _tabController; var _tabList = []; @override void initState() { // TODO: implement initState super.initState(); rootBundle .loadString("assets/json/categories.json") .then((value) => {_tabList = json.decode(value)}); _tabController = TabController( length: _tabList.length, vsync: this); // Categories have a length of 8. My side moke the json data directly _tabController. AddListener (() {switch (_tabController. Index) {/ / TODO access tabBarView}}); } @override Widget build(BuildContext context) { return Scaffold( appBar: TabBar( controller: _tabController, isScrollable: true, // Scroll labelColor: primaryColor, unselectedLabelColor: firstColor, labelStyle: TextStyle(fontSize: 12.0), Tabs: _tabList.map ((e) => Tab(text: e['category_name'],)).tolist ()), body: New TabBarView(Controller: _tabController, children: _tablist. map((e) {// Create three Tab pages. Alignment.center, child: Text(e['category_url'], textScaleFactor: 5), ); }).toList(), ), ); }}Copy the code

The renderings are as follows