Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[How to use] child scrollview adding scrollcontroller #155

Closed
LEEKIWAN opened this issue Apr 24, 2024 · 4 comments
Closed

[How to use] child scrollview adding scrollcontroller #155

LEEKIWAN opened this issue Apr 24, 2024 · 4 comments
Labels
StackOverflow issue can be asked in StackOverflow

Comments

@LEEKIWAN
Copy link

Platforms

dart

Description

I want to add a scroll controller to the child view on the tab view page because paging is required, but there is an issue where full scrolling is possible when I add it. Is there a way?

My code

class SymbolDetailPage extends GetView<SymbolDetailPageController> {
  final double tabBarHeight = 40;

  SymbolDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    context.theme;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Obx(() => SymbolDetailNavigationBar(
                symbolDetail: controller.symbolDetail.value, naviBottomScrollController: controller.naviBottomScrollController, naviTopScrollController: controller.naviTopScrollController)),
            Expanded(
              child: ExtendedNestedScrollView(
                headerSliverBuilder: (BuildContext c, bool f) {
                  return [
                    SliverToBoxAdapter(
                      child: Obx(
                        () => SymbolDetailHeader(
                          symbolDetail: controller.symbolDetail.value,
                          isFolded: controller.isHeaderFolded.value,
                          onExpandTapped: () {
                            controller.isHeaderFolded.value = !controller.isHeaderFolded.value;
                          },
                        ),
                      ),
                    ),
                  ];
                },
                controller: controller.outerScrollController,
                pinnedHeaderSliverHeightBuilder: () => 0,
                body: Obx(
                  () => Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      if (controller.tabController.value != null)
                        tabbar(),
                      Divider(height: 1),
                      if (controller.tabController.value != null)
                        Expanded(
                          child: TabBarView(
                            controller: controller.tabController.value,
                            children: controller.tabPageList,                 //      !!!!!!!!!!!!!!!!!!!!!!!
                          ),
                        )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget tabbar() {
    return TabBar(
      padding: EdgeInsets.symmetric(horizontal: 24),
      labelPadding: EdgeInsets.symmetric(horizontal: 10),
      controller: controller.tabController.value,
      labelColor: Get.textTheme.bodyMedium?.color,
      indicatorColor: Get.textTheme.bodyMedium?.color,
      indicatorSize: TabBarIndicatorSize.tab,
      isScrollable: true,
      unselectedLabelColor: Get.textTheme.bodySmall?.color,
      labelStyle: Get.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700),
      tabs: [
        SizedBox(height: tabBarHeight, child: Tab(text: 'Chart')),
        SizedBox(height: tabBarHeight, child: Tab(text: 'Signal')),
        SizedBox(height: tabBarHeight, child: Tab(text: 'News')),
        SizedBox(height: tabBarHeight, child: Tab(text: 'Overview')),
      ],
    );
  }
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:waiker/modules/symbol_detail/controller/symbol_detail_news_page_controller.dart';

class SymbolDetailNewsPage extends GetView<SymbolDetailNewsPageController> {

  const SymbolDetailNewsPage({super.key});

  @override
  Widget build(BuildContext context) {

    return SingleChildScrollView(
      key: const PageStorageKey<String>('Tab2'),
      physics: const ClampingScrollPhysics(),
      controller: controller.scrollController,       //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! this paiging 
      child: Column( 
        children: [
          Container(
            height: 400,
            color: Colors.blue,
          ),
          Container(
            height: 400,
            color: Colors.red,
          ),
        ],
      ),
    );
  }
}

Try do it

TT

@zmtzawqlp zmtzawqlp added the StackOverflow issue can be asked in StackOverflow label Apr 24, 2024
@zmtzawqlp
Copy link
Member

please check

ScrollController get innerController => _coordinator!._innerController;

@LEEKIWAN
Copy link
Author

class SymbolDetailPage extends GetView<SymbolDetailPageController> {

  final GlobalKey<ExtendedNestedScrollViewState> _nestedScrollViewState = GlobalKey<ExtendedNestedScrollViewState>();  //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  final double tabBarHeight = 40;

  SymbolDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    context.theme;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Obx(() => SymbolDetailNavigationBar(
                symbolDetail: controller.symbolDetail.value, naviBottomScrollController: controller.naviBottomScrollController, naviTopScrollController: controller.naviTopScrollController)),
            Expanded(
              child: ExtendedNestedScrollView(
                key: _nestedScrollViewState,                   // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                headerSliverBuilder: (BuildContext c, bool f) {
                  return [

other class Using It


    final GlobalKey<ExtendedNestedScrollViewState> _nestedScrollViewState = GlobalKey<ExtendedNestedScrollViewState>();

    print('sdfsfdsdsfsdsdf');
    print(_nestedScrollViewState);

    _nestedScrollViewState.currentState!.innerController.addListener(() {
      print('sdsdfdsdf');
    });


    _nestedScrollViewState.currentState!.outerController.addListener(() {
      print('sdsdfdsdf');
    });

    print(_nestedScrollViewState.currentContext);
    print(_nestedScrollViewState.currentWidget);
    print(_nestedScrollViewState);

i'm a newbie so it doesn't work out well.
It seems to be used as a global key, but it is difficult to apply from the description alone. Are there any sample examples?

@zmtzawqlp
Copy link
Member

_key.currentState?.outerController.animateTo(

make sure you are using it at right moment.

@LEEKIWAN
Copy link
Author

thanks~! shie shie

i can do

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
StackOverflow issue can be asked in StackOverflow
Projects
None yet
Development

No branches or pull requests

2 participants