How to move Tab button to actions zone in AppBar (Flutter Windows)

  Kiến thức lập trình

I want to make a “Settings” button in the actions area of ​​the AppBar. I seem to have succeeded, but I can click on this empty container. I want to make it so that Settings is either in the Tab widget but next to the buttons (minimize, close) or is in the actions list, but it was possible to switch between the buttons in the AppBar as in Tab.

AppBar

import 'widgets/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:window_manager/window_manager.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'constants.dart';
import 'widgets/main_tab/connect_to_server.dart';
import 'widgets/main_tab/create_server.dart';

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

  @override
  State<CoopAndreasLauncher> createState() => _CoopAndreasLauncherState();
}

class _CoopAndreasLauncherState extends State<CoopAndreasLauncher> with TickerProviderStateMixin {
  final TextEditingController nicknameController = TextEditingController();
  final TextEditingController ipPortController = TextEditingController();
  int maxPlayers = 2;
  String selectedLanguage = 'English';

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(initialIndex: 0, vsync: this, length: 3);
  }

  @override
  void dispose() {
    nicknameController.dispose();
    ipPortController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  late final List<IconButton> _actions = [
    IconButton(
      icon: const Icon(FontAwesomeIcons.gear),
      iconSize: 20.0,
      onPressed: () {
        _tabController.animateTo(2); // this line goto tab with index 2
      },
    ),
    IconButton(
      icon: const Icon(Icons.minimize),
      iconSize: 20.0,
      onPressed: () {
        windowManager.minimize();
      },
    ),
    IconButton(
      icon: const Icon(Icons.close),
      iconSize: 20.0,
      onPressed: () {
        windowManager.close();
      },
    )
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: _tabController.index,
      length: _tabController.length,
      child: Scaffold(
        appBar: CustomAppBar(
          actions: _actions,
          title: TabBar(
            labelColor: Colors.white,
            controller: _tabController,
            indicatorColor: Colors.transparent,
            dividerColor: Colors.transparent,
            splashBorderRadius: const BorderRadius.all(Radius.circular(10.0)),
            tabAlignment: TabAlignment.center,
            tabs: [
              const Tab(
                  icon: Icon(FontAwesomeIcons.plug, size: 21.0),
                  child: Text(
                      "Connect",
                      style: tabTextStyle,
                  )
              ),
              const Tab(
                  icon: Icon(FontAwesomeIcons.server, size: 21.0),
                  child: Text(
                    "Server",
                    style: tabTextStyle,
                  )
              ),
              Container() // tab index 2
            ]
          )
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            ConnectToServerTab(nicknameController: nicknameController, ipPortController: ipPortController),
            CreateServerTab(nicknameController: nicknameController, ipPortController: ipPortController, maxPlayers: maxPlayers, onMaxPlayersChanged: (value) {
              setState(() {
                maxPlayers = value;
              });
            }),
            // Settings
          ]
        )
      ),
    );
  }
}

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT