How to implement Graph from Charts_Flutter package into stream builder

50 views Asked by At

i am trying to call this widget

import '';


class GraphScreen extends StatefulWidget {
  const GraphScreen({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _GraphScreenState createState() => _GraphScreenState();
}

class _GraphScreenState extends State<GraphScreen> {
  late List<charts.Series<Data, DateTime>> _Data;

  @override
  Widget build(BuildContext context) {
    _Data = generateData();

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        width: max(3000, (_Data.length) * 100),
        child: charts.TimeSeriesChart(
          [..._Data], // Gabungkan data 
          animate: true,
          behaviors: [
            charts.PanAndZoomBehavior(),
            charts.SlidingViewport(),
            charts.SeriesLegend(
              position: charts.BehaviorPosition.bottom,
              entryTextStyle: const charts.TextStyleSpec(
                fontSize: 12,
                color: charts.MaterialPalette.white,
              ),
            ),
          ],
          dateTimeFactory: const charts.LocalDateTimeFactory(),
          defaultRenderer: charts.LineRendererConfig(stacked: true),
        ),
      ),
    );
  }
}

to be implemented in the build widget below

import '......'

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final user = FirebaseAuth.instance.currentUser!;
  late final stream =
      FirebaseDatabase.instance.ref().child('data').onChildAdded;
  void signUserOut() {
    FirebaseAuth.instance.signOut();
  }

  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
        child: Stack(
          children: [
            StreamBuilder(
              stream: stream,
              builder: (context, snapshot) {
                //code ...
                  return Stack(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 70, left: 10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "...",
                              style: whiteTextStyle.copyWith(
                                  fontSize: 20, fontWeight: bold),
                            ),
                            const Spacer(),
                            IconButton(
                              //code
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(
                          top: 110,
                          left: 10,
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Container(
                              child: Text(
                                "...",
                                style: whiteTextStyle.copyWith(fontSize: 16),
                              ),
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Container(
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  // Call External Widget
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(
                          top: 210,
                          left: 10,
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Container(
                              child: Text(
                                "...",
                                style: whiteTextStyle.copyWith(fontSize: 16),
                              ),
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Container(
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  // Call Widget External
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(
                          top: 380,
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            
                            Positioned(
                              top: 380,
                              child: Container(
                                //code
                                  children: [GraphScreen(),],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  );
                }
                if (snapshot.hasError) {
                  print(snapshot.error.toString());
                  return Text(snapshot.error.toString());
                }
                return const Text('....');
              },
            ),
          ],
        ),
      ),
    );
  }
}

The result is that the graph doesn't appear at all, even though there is no error

I have tried changing the widget arrangement such as deleting expanded and so on but it doesn't work, I put graphscreen in positioned/container/children. ask for help

0

There are 0 answers