CODEWITHSUNDEEP
flutterdart
Daniel
Daniel

Reputation: 486

How can I implement nested view (dynamic page) in Flutter?

I am trying to implement a booking confirmation page in Flutter. The application allows users to book a flight, trains,taxi, accommodation, etc. What ever the user has booked I want the confirmation page to show the booking. I want the page to consider the following scenarios:

  1. The user may book single or return service
  2. The user may book flights and train or just flight.

I want to use the following methods such as CustomScrollView, StatefulBuilder, SliverList,ListTile. But, I don't know how to do it by considering all the above scenarios.

How can I implement this?

I have created some dummy data:

class SummaryData {
  String serviceName; //flight,train
  List<SingleService> lisOfService;
  SummaryData(this.serviceName, this.lisOfService);
}

//from - to section
class SingleService {
  var origin, destination;
  var takeOfTime;
  var serviceProvide;

  SingleService(this.origin, this.destination, this.takeOfTime, this.serviceProvider);
}

class SummaryDataRepository {
  List<SummaryData> listOfSummaryData;
  SummaryDataRepository() {
    listOfSummaryData = new List<SummaryData>();
    listOfSummaryData.add(new SummaryData(
        "Flight", [new SingleService("London", "Rome", "11:00", "AirX")]));
    listOfSummaryData.add(new SummaryData(
        "Train", [new SingleService("London", "Heathrow", "10:00", "TrainX")]));
  }

  List<SummaryData> getSummaryData() {
    return listOfSummaryData;
  }
}

enter image description here enter image description here enter image description here

Upvotes: 0

Views: 875

Answers (2)

Daniel
Daniel

Reputation: 486

This is the solution of my own question -in case, someone may find it useful. 

class SummaryPage extends StatelessWidget {
  SummaryDataRepository summaryDataRepository = new SummaryDataRepository();
  @override
  Widget build(BuildContext context) {
    return Container(
        child: new ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: summaryDataRepository.listOfSummaryData.length,
            itemBuilder: (BuildContext context, i) => ListTile(
                    title: new Card(
                        child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      summaryDataRepository.listOfSummaryData[i].serviceName
                          .toString(),
                      style: TextStyle(
                          fontSize: 25.0, fontWeight: FontWeight.w600),
                      textAlign: TextAlign.left,
                    ),
                    new ListView.builder(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        itemCount: summaryDataRepository
                            .listOfSummaryData[i].lisOfService.length,
                        itemBuilder: (BuildContext c, j) => ListTile(
                            title: _drawService(
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .origin,
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .destination,
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .takeOfTime,
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .serviceProvider)))
                  ],
                )))));
  }

  _drawService(origin, destination, takeOfTime, serviceProvider) {
    return new Container(
        child: new Column(
      children: <Widget>[
        new Text("$origin - $destination"),
        new Text(takeOfTime),
        new Text(serviceProvider),
      ],
    ));
  }
}

Upvotes: 0

Abdulaziz Yesuf
Abdulaziz Yesuf

Reputation: 602

You might want to use routes and navigation if you have limited number of possibilities in the page you want to load. But if you must always dynamically load the page you might want to use the dynamic widget package. you can read more about it here: https://pub.dev/packages/dynamic_widget

Upvotes: 1

Related Questions