Как я могу заставить блог работать в TabBarView?

Question

Я пытаюсь получить мой блог, который использует REST API с сайта Wordpress, чтобы показать в TabBarView И я не совсем уверен, как go об этом. Сначала я попробовал Widget blogSection = WordpressBlog(posts: posts);, но я получил ошибку: «только инициалы c могут быть доступны в инициализаторах» ... поэтому я поместил свой код в void initState(){...}. Имеется 3 вкладки: infoSection, blogSection и contactSection. Две вкладки жестко запрограммированы и работают нормально. Также я извлек свой блог в wordpress_blog.dart и назвал его: WordpressBlog Это хорошо работает на моей другой странице блога. Вот полный код:

import 'package:cmfiflutterapp/components/wordpress_blog.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() {
  runApp(MaterialApp(home: GlobalCompassion()));
}

class GlobalCompassion extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => GlobalCompassionState();
}

class GlobalCompassionState extends State {
  // Base URL for our wordpress API
  final String apiUrl = "https://cmf.international/wp-json/wp/v2/";

  // Empty list for our posts
  List posts;

  // Function to fetch list of posts
  Future<String> getPosts() async {
    var res = await http.get(Uri.encodeFull(apiUrl + "posts?_embed"),
        headers: {"Accept": "application/json"});

    // fill our posts list with results and update state
    setState(() {
      var resBody = json.decode(res.body);
      posts = resBody;
    });

    return "Success!";
  }

  @override
  void initState() {
    super.initState( );
    this.getPosts( );
    blogSection = Column(
      children: <Widget>[
        WordpressBlog(posts: posts)
      ],
      );
  }

  Widget infoSection = SingleChildScrollView(
    padding: EdgeInsets.all(14.0),
    child: Column(
      children: <Widget>[
        Text(
          ...
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Image.asset('assets/images/glocompassion.png'),
        SizedBox(
          height: 20,
        ),
        Text(
          ...
        ),
      ],
    ),
  );

  Widget blogSection;

  Widget contactSection = SingleChildScrollView(
    padding: EdgeInsets.all(14.0),
    child: Center(
      child: Text(
          ...
    ),
  );


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 3,
        child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 200,
                  floating: false,
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text('GlobalCompassion'),
                    background: Image.asset(
                      'assets/images/gcompassion.jpg',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                SliverPadding(
                  padding: EdgeInsets.all(16.0),
                  sliver: SliverList(
                    delegate: SliverChildListDelegate([
                      TabBar(
                          labelColor: Colors.blue,
                          unselectedLabelColor: Colors.grey,
                          tabs: [
                            Tab(icon: Icon(Icons.info), text: 'About Us'),
                            Tab(icon: Icon(Icons.create), text: 'Blog'),
                            Tab(icon: Icon(Icons.contact_mail), text: 'Contact')
                          ])
                    ]),
                  ),
                )
              ];
            },
            body: Container(
              height: 200.0,
              child: TabBarView(
                children: <Widget>[infoSection, blogSection, contactSection],
              ),
            )),
      ),
    );
  }
}

Любая помощь очень ценится ... спасибо!

Answer 1

Наконец-то решил это. 3 вещи, которые я должен был изменить.

Сначала нужно было сделать мои List stati c ... поэтому изменили это: List posts; на следующее: static List posts;

Вторым было удалить ненужный код из initState так из этого:

@override
  void initState() {
    super.initState( );
    this.getPosts( );
    blogSection = Column(
      children: <Widget>[
        WordpressBlog(posts: posts)
      ],
      );
  } 

к этому:

@override
      void initState() {
        super.initState( );
        this.getPosts( );
      }

В-третьих, добавить Scaffold к blogSection, например:

 Widget blogSection = Scaffold(
       body: WordpressBlog(posts: posts)
    )

Это сделал это. Теперь у меня есть рабочий блог Wordpress REST API во вкладках флаттера. Спасибо всем!