0

I'm trying to make two tabs and put a DropDownButton besidse them. `Like this!

However, I should make DropDownButton dependging on what tab I choose. For example, if I click tab1, DropDownList1 should apply to DropDownButton, and click Tab2, DropDownList2 should apply to DropDown Button. I think about use 'int whichTab=1' to manage which tab I choose but I don't know where can I put this variable.

Can you give me some idea to handle it?

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:practice/controller/tabController.dart';

class TabPage extends GetView<TabController> {
  const TaboPage ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(
          () =>
          DefaultTabController(
            length: 3,
            child: Scaffold(
              backgroundColor: Color(0xff0F9F9F9),
              appBar: AppBar(
                  leading: IconButton(
                    icon: Icon(
                        Icons.keyboard_arrow_left_rounded, color: blackcolor),
                    onPressed: () => Get.back(),
                  ),
                  titleSpacing: 0,
                  elevation: 0,
                  title: const Text(
                    'tab page',
                    style: TextStyle(fontSize: 19, fontWeight: FontWeight.bold),
                  ),
                  bottom: TabBar(
                      labelColor: Colors.black,
                      labelStyle: TextStyle(fontWeight: FontWeight.bold),
                      unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
                      indicator: UnderlineTabIndicator(
                        borderSide: BorderSide(width: 2.0, color: maincolor),
                        insets: EdgeInsets.symmetric(horizontal:30.0),
                      ),
                      tabs: [
                        Tab(text: 'Tab1',),
                        Tab(text: 'Tab2',),
                        DropdownButtonHideUnderline(
                            child: DropdownButton<RxString>(
                                onChanged: (newValue) {
                                  controller.tab1Selected(newValue.toString());
                                },
                                value: controller.tab1Selected,
                                items: [
                                  for (var value in controller.tab1Type)
                                    DropdownMenuItem(
                                      child: Text(value),
                                      value: value.obs,
                                    ),
                                ]),)
                      ]
                  )
              ),
              body: TabBarView(
                children: [
                  SingleChildScrollView(
                    child: Padding(
                        padding: EdgeInsets.all(12),
                        child: Column(
                            children:[
                              Box(),
                            ]
                        )
                    ),
                  ),
                  SingleChildScrollView(
                    child: Padding(
                        padding: EdgeInsets.all(12),
                        child: Column(
                            children:[
                              Box(),
                            ]
                        )
                    ),
                  ),
                ],
              ),
            ),
          ),
    );
  }

  Widget Box(context){
    return Container();
  }
}
import 'package:get/get.dart';

class TabController extends GetxController {


  RxInt whichTab=1.obs; //I tried to use it like 1: tab1, 2: tab2

  final tab1Type = [
    'apple',
    'banana',
    'mango'
  ].obs;
  RxString tab2Selected = "apple".obs;


  final tab2Type = [
    'apple',
    'banana',
    'mango',
    'melon'
  ].obs;
  RxString tab2Selected = "apple".obs;


}
yunju
  • 13
  • 5

0 Answers0