I have json file with me and to display json text data with in the book of book

Question

I have json data, out of that I want to display text data like when a book is opened on the first page and all the text is displayed there, then when I go to the next page, the new text data is displayed, but the file in the assets remains the same. For example, I have made a video. giving link

https://drive.google.com/file/d/1f_n7p2mmRXmea9UghIdDWl-9Bnk0a_Yv/view?usp=drivesdk

search flip_widget package for this animination

I need like this please help me out Please anyone can help to me create like yhis

Answer 1

I'm going to assume some things, you have a JSON with a list of TextData (an object with some data which I don't know).

So follow these steps:

1.decode the JSON, I don't know how you get this JSON, but let's assume.

final json = getJson(); // Your method to get JSON here

final map = List.from(jsonDecode(json)).map((e) => Mapper.fromJson(e)).toList();

2.Create a mapper to transform each element of the list in a class object. TextData for example.

3.Now you have a list of TextData, that you can transform in a widget, for each page.

4.Create a StatelessWidget to display your TextData

5.Create a StatefulWidget with a state int page = 0; and then, each time you change the page you can update your page state. The page will going to be the list index, the list you will have to load in the initial state of your widget.

List<TextData> list = [];
int page = 0;

@override
void initState() {
    load();
}

Future<void> load() async {
    final res = await getList(); // A function to load your list
    setState(() => list = res);
}

void nextPage() {
    if (page == list.length - 1) return; // To not overflow your pages
    setState(() {
        page = page + 1;
    });
}

void previousPage() {
    if (page == 0) return; // To not be negative
    setState(() {
        page = page - 1;
    });
}

@override
Widget build() => list.isEmpty // Cause you can't access list[0] if it's empty
? const SizedBox()
: TextDataWidget(
    data: list[page],
    onNext: nextPage,
    onPrevious: previousPage,
);