Multi screens

[BenedettoMarcoSerinelli]

Hi community,
I am a newbie in Flutter. I was wondering, if I could integrate the ZMQ sub dart in multi screens flutter windows application.

Any examples/advices are welcomed and appreciated.

[enwi]

@BenedettoMarcoSerinelli Did you figure something out that you might want to share here? Otherwise I am going to close this issue 🙂

[BenedettoMarcoSerinelli]

Hi @enwi, I figured out the problem by using the navigation bar.

I also tested:

• No lost connection when users navigate between bars.
• No lost message when users stay a long on the same bar.

Below a "dirty" snippet that could be useful.

import 'dart:async';
import 'dart:convert';
import 'package:auto_scroll/auto_scroll.dart';
import 'package:dartzmq/dartzmq.dart';
import 'package:flutter/material.dart';
import 'home.dart';

void main() => runApp(const ProviderScope(child: NavigationBarApp()));

class NavigationBarApp extends StatelessWidget {
  const NavigationBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const NavigationExample(),
    );
  }
}

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

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  final ZContext _context = ZContext();
  late final MonitoredZSocket _socket;
  String _receivedData = '';
  List<String> received = [];
  late StreamSubscription _subscription;
  String example = 'Empty';
  String filename = '';
  int currentPageIndex = 0;

  @override
  void initState() {
    _socket = _context.createMonitoredSocket(SocketType.sub);
    _socket.connect("tcp://localhost:5557");
    _socket.subscribe(‘/topic1’);
    _socket.subscribe(‘/example/topic2’);
    _socket.subscribe(‘/example/topic3’);

    // listen for payloads
    _subscription = _socket.payloads.listen((payload) {
      setState(() {
        _receivedData = utf8.decode(payload);
        received.add(_receivedData);
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _socket.close();
    _context.stop();
    _subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return Scaffold(

      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        indicatorColor: Colors.amber,
        selectedIndex: currentPageIndex,
        destinations: const <Widget>[
          NavigationDestination(
            selectedIcon: Icon(Icons.home),
            icon: Badge(child: Icon(Icons.home_outlined)),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.file_open),
            selectedIcon: Badge(child: Icon(Icons.file_open_outlined)),
            label: 'Notifications',
          ),
          NavigationDestination(
            icon: Icon(Icons.minor_crash),
            selectedIcon: Badge(child: Icon(Icons.minor_crash_outlined)),
            label: ‘Acquisition',
          ),
          NavigationDestination(
            icon: Icon(Icons.bug_report_sharp),
            selectedIcon: Badge(child: Icon(Icons.bug_report_outlined)),
            label: 'Debug Console',
          ),
        ],
      ),
      body: <Widget>[
        /// Home page
        const HomePage(),
        const HomePage(),

        /// Messages page
        ListView.builder(
          reverse: true,
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            if (index == 0) {
              return Align(
                alignment: Alignment.centerRight,
                child: Container(
                  margin: const EdgeInsets.all(8.0),
                  padding: const EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: theme.colorScheme.primary,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Text(
                    'Hello',
                    style: theme.textTheme.bodyLarge!.copyWith(color: theme.colorScheme.onPrimary),
                  ),
                ),
              );
            }
            return  Consumer(
              builder: (context, ref, child) {
                final fileName = ref.watch(fileNameProvider);
                return Center(
                  child: Text(
                    'Selected file: ${fileName ?? "No file selected"}',
                  ),
                );
              },
            );
          },
        ),

        /// Debug console
        AutoScroller(
          lengthIdentifier: received.length,
          anchorThreshold: 24,
          startAnchored: false,
          builder: (context, controller) {
            return ListView.builder(
              controller: controller,
              itemCount: received.length,
              itemBuilder: (context, index) => ListTile(title: Text('Item ${received[index]}')),
            );
          },
        ),
      ][currentPageIndex],
    );
  }
}

If you would like we could close the issue.