HBO Max clone tizen

[Aaron1337men]

Hi, im want to create a hbo max clone in a tv tizen with flutter. I search for an example but for now I didn't found. But for now im decide to create my own app, but im getting this error:
[E] [ERROR:ax_platform_node_base.cc(167)] Unable to find the child in the list of its parent's children.
[E] [ERROR:ax_platform_node_base.cc(169)] Reached unreachable code.
DotNET onSigabrt called on com.example.tizen_tv_app
I was forced to change page view builder for a custom page view, because that suddenly crash the app.
I want to know if it's possible to create an app using flutter tizen. The form that I handling the key event it with a Focus widget with the function onKeyEvent.

[JSUYA]

Hi. We need more information.
Do you have accessibility features(Voice-guide) turned on on your TV?
Can you share a reproducible code that causes the error?

[Aaron1337men]

H, I turned off the accessibility features, and the app still crash. I don't know what code you will need to reproduce the error, I mean if you want all the project to run and reproduce the error. I don't know if the error goes for the excessive amount of image I charge.

This is the code when the app crashes:
import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:tizen_tv_app/feature/movies/domain/models/movie_model.dart';
import 'package:tizen_tv_app/feature/movies/presentation/cubit/home_cubit.dart';
import 'package:tizen_tv_app/feature/movies/presentation/cubit/home_state.dart';

import 'package:tizen_tv_app/mobile_app_core/constants/constants.dart';
import 'package:tizen_tv_app/mobile_app_core/di/service_locator.dart';
import 'package:tizen_tv_app/mobile_app_core/utils/enums/status.dart';
import 'package:tizen_tv_app/styles/app_colors.dart';
import 'package:tizen_tv_app/styles/app_spaces.dart';
import 'package:tizen_tv_app/themes/text_themes.dart';
import 'package:tizen_tv_app/widgets/buttons/custom_button.dart';
import 'package:tizen_tv_app/widgets/focus_node/focus_base_widget.dart';
import 'package:tizen_tv_app/widgets/loaders/circular_progress_indicator.dart';

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

@OverRide
State createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
final ScrollController _scrollController = ScrollController();
final GlobalKey widgetKey = GlobalKey();
final FocusNode focusTrendingSection = FocusNode();
final FocusNode focusLeftArrow = FocusNode();
final FocusNode focusRightArrow = FocusNode();
final FocusNode focusMoreInfo = FocusNode();
//late PageController controller;
int _currentPage = 0;
final ScrollController listController = ScrollController();
int focusedIndex = 0;

@OverRide
void initState() {
super.initState();
//controller = PageController(initialPage: 0);

focusRightArrow.requestFocus();

}

void _handleKeyEvent(
{required KeyEvent event, required List trendingMovies}) {
if (event is KeyDownEvent) {
print(event);
if (focusTrendingSection.hasFocus) {
if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
focusedIndex = (focusedIndex + 1) % trendingMovies.length;
print(focusedIndex);

      setState(() {});
      //_scrollToIndex(focusedIndex);
    } else if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
      focusedIndex = (focusedIndex - 1 + trendingMovies.length) %
          trendingMovies.length;
      print(focusedIndex);

      setState(() {});
      //_scrollToIndex(focusedIndex);
    } else if (event.logicalKey == LogicalKeyboardKey.select) {
      //goRouter.goNamed(AppRoute.home.name);
    } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
      focusMoreInfo.requestFocus();
      setState(() {});
      //_scrollPopularSection(0);
      //goRouter.goNamed(AppRoute.home.name);
    }
  }
}

}

@OverRide
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => locator()..init(),
child: BlocBuilder<HomeCubit, HomeState>(
builder: (context, state) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
//color: Colors.transparent,
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
AppColors.backgroundGradient3,
AppColors.backgroundGradient4,
AppColors.backgroundGradient5,
],
),
),
child: SingleChildScrollView(
controller: _scrollController,
child: Column(
children: [
/* BlocBuilder<HomeCubit, HomeState>(
builder: (context, state) {
return state.getPopularMoviesStatus.isLoading
? const SizedBox(
height: 400,
child: Center(
child: CustomCircularProgressIndicator(
color: AppColors.neutralWhite,
),
),
)
: SizedBox(
height: 400,
child: CustomPageView(
focusTrendingSection: focusTrendingSection,
focusMoreInfo: focusMoreInfo,
pages: state.popularMovies.map((element) {
return SizedBox(
//width: MediaQuery.of(context).size.width,
child: Image.network(
'${Constants.urlBaseImage}${element.posterPath}',
fit: BoxFit.cover,
),
);
}).toList(),
),
);
},
), */
PopularSection(
scrollController: _scrollController,
focusTrendingSection: focusTrendingSection,
focusLeftArrow: focusLeftArrow,
focusRightArrow: focusRightArrow,
focusMoreInfo: focusMoreInfo),
TrendingContetSection(
scrollController: _scrollController,
focusTrendingSection: focusTrendingSection,
focusLeftArrow: focusLeftArrow,
focusRightArrow: focusRightArrow,
focusMoreInfo: focusMoreInfo),
],
),
),
));
},
),
);
}
}

class PopularSection extends StatefulWidget {
final ScrollController scrollController;
final FocusNode focusTrendingSection;
final FocusNode focusLeftArrow;
final FocusNode focusRightArrow;
final FocusNode focusMoreInfo;
const PopularSection({
super.key,
required this.scrollController,
required this.focusTrendingSection,
required this.focusLeftArrow,
required this.focusRightArrow,
required this.focusMoreInfo,
});

@OverRide
State createState() => _PopularSectionState();
}

class _PopularSectionState extends State {
//late PageController controller;
int _currentPage = 0;

@OverRide
void initState() {
super.initState();
//controller = PageController(initialPage: 0);
}

void _scrollTrendingSection(int index) {
if (!widget.scrollController.hasClients) return;

const itemHeight = 400.0; // Ajusta al tamaño real de los items
final double position = index * itemHeight;
final double maxScroll = widget.scrollController.position.maxScrollExtent;
final double minScroll = widget.scrollController.position.minScrollExtent;

final double targetScroll = position.clamp(minScroll, maxScroll);

widget.scrollController.animateTo(
  targetScroll,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

}

@OverRide
Widget build(BuildContext context) {
return BlocBuilder<HomeCubit, HomeState>(
builder: (context, state) {
return state.getPopularMoviesStatus.isLoading
? const SizedBox(
height: 400,
child: Center(
child: CustomCircularProgressIndicator(
color: AppColors.neutralWhite,
),
),
)
: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
alignment: Alignment.center,
children: [
ShaderMask(
shaderCallback: (rect) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.black, Colors.transparent],
).createShader(
Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: SizedBox(
height: 400,
width: double.infinity,
child: /* PageView.builder(
controller: controller,
itemCount: state.popularMovies.length,
onPageChanged: (index) {
setState(() {
_currentPage = index;
});
},
itemBuilder: (context, index) {
return SizedBox(
//width: MediaQuery.of(context).size.width,
child: Image.network(
'${Constants.urlBaseImage}${state.popularMovies[index].posterPath}',
fit: BoxFit.cover,
),
);
},
), /
/ CustomPageView(
focusTrendingSection: widget.focusTrendingSection,
focusMoreInfo: widget.focusMoreInfo,
pages: state.popularMovies.map((element) {
return SizedBox(
//width: MediaQuery.of(context).size.width,
child: Image.network(
'${Constants.urlBaseImage}${element.posterPath}',
fit: BoxFit.cover,
),
);
}).toList(),
), /
SizedBox(
//width: MediaQuery.of(context).size.width,
child: Image.network(
'${Constants.urlBaseImage}${state.popularMovies.first.posterPath}',
fit: BoxFit.cover,
),
),
),
),
Positioned(
left: 10,
child: Focus(
autofocus: true,
focusNode: widget.focusLeftArrow,
onKeyEvent: (node, event) {
if (event is KeyDownEvent) {
print(event);
if (event.logicalKey ==
LogicalKeyboardKey.arrowLeft) {
} else if (event.logicalKey ==
LogicalKeyboardKey.arrowRight) {
widget.focusRightArrow.requestFocus();
} else if (event.logicalKey ==
LogicalKeyboardKey.arrowDown) {
widget.focusTrendingSection.requestFocus();
//_scrollTrendingSection(1);
} else if (event.logicalKey ==
LogicalKeyboardKey.select ||
event.logicalKey ==
LogicalKeyboardKey.enter) {
print('holaaa');
/ controller.previousPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
); /
}
setState(() {});
}
return KeyEventResult.handled;
},
child: Padding(
padding: const EdgeInsets.all(AppSpaces.xs),
child: Transform.scale(
scale: widget.focusLeftArrow.hasFocus ? 1.0 : 0.9,
child: const Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 30,
),
),
),
),
),
Positioned(
right: 10,
child: Focus(
focusNode: widget.focusRightArrow,
onKeyEvent: (node, event) {
if (event is KeyDownEvent) {
if (event.logicalKey ==
LogicalKeyboardKey.arrowLeft) {
widget.focusLeftArrow.requestFocus();
} else if (event.logicalKey ==
LogicalKeyboardKey.arrowRight) {
widget.focusRightArrow.requestFocus();
} else if (event.logicalKey ==
LogicalKeyboardKey.arrowDown) {
widget.focusTrendingSection.requestFocus();
// _scrollTrendingSection(1);
} else if (event.logicalKey ==
LogicalKeyboardKey.select ||
event.logicalKey ==
LogicalKeyboardKey.enter) {
print('adios');
/ controller.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
); /
}
setState(() {});
}
return KeyEventResult.handled;
},
child: Padding(
padding: const EdgeInsets.all(AppSpaces.xs),
child: Transform.scale(
scale:
widget.focusRightArrow.hasFocus ? 1.0 : 0.9,
child: const Icon(
Icons.arrow_forward_ios,
color: Colors.white,
size: 30,
),
),
),
),
),
Positioned(
left: 0,
bottom: 40,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.only(left: AppSpaces.m),
child: Text(
state.popularMovies[_currentPage].title ?? '',
style: Theme.of(context)
.textTheme
.regularCaptionWhite
.copyWith(
fontSize: 24,
fontWeight: FontWeight.w500,
color: AppColors.neutralWhite,
),
)),
const SizedBox(
height: AppSpaces.xs,
),
Focus(
focusNode: widget.focusMoreInfo,
onKeyEvent: (node, event) {
if (event is KeyDownEvent) {
if (event.logicalKey ==
LogicalKeyboardKey.arrowDown) {
widget.focusTrendingSection.requestFocus();
//_scrollTrendingSection(1);
} else if (event.logicalKey ==
LogicalKeyboardKey.arrowUp) {
widget.focusRightArrow.requestFocus();
} else if (event.logicalKey ==
LogicalKeyboardKey.select) {
print('ir a peli');
}
setState(() {});
}
return KeyEventResult.handled;
},
child: Padding(
padding:
const EdgeInsets.only(left: AppSpaces.m),
child: CustomButton(
useCompleteWidth: false,
model: CustomButtonModel(
customBackgroundColor:
AppColors.neutralDarkBlack,
type: CustomButtonType.primary,
size: CustomButtonSize.l,
text: 'More info',
textStyle: Theme.of(context)
.textTheme
.regularCaptionWhite
.copyWith(
fontSize: 16,
fontWeight: FontWeight.w500,
color: AppColors.neutralWhite,
),
),
onPressed: () {},
),
),
),
],
),
)
],
),
/ Center(
child: SmoothPageIndicator(
controller: controller,
count: state.popularMovies.length,
effect: const ExpandingDotsEffect(
//paintStyle: PaintingStyle.fill,
activeDotColor: Colors.white,
dotColor: Colors.grey,
dotHeight: 8,
dotWidth: 8,
),
),
), */
],
);
},
);
}
}

class TrendingContetSection extends StatefulWidget {
final ScrollController scrollController;
final FocusNode focusTrendingSection;
final FocusNode focusLeftArrow;
final FocusNode focusRightArrow;
final FocusNode focusMoreInfo;

const TrendingContetSection(
{super.key,
required this.scrollController,
required this.focusTrendingSection,
required this.focusLeftArrow,
required this.focusRightArrow,
required this.focusMoreInfo});

@OverRide
State createState() => _TrendingContetSectionState();
}

class _TrendingContetSectionState extends State {
final ScrollController listController = ScrollController();
int focusedIndex = 0;

void _scrollToIndex(int index) {
if (!listController.hasClients) return;

const itemHeight = 250.0; // Ajusta al tamaño real de los items
final double position = index * itemHeight;
final double maxScroll = listController.position.maxScrollExtent;
final double minScroll = listController.position.minScrollExtent;

final double targetScroll = position.clamp(minScroll, maxScroll);

listController.animateTo(
  targetScroll,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

}

void _scrollPopularSection(int index) {
if (!widget.scrollController.hasClients) return;

const itemHeight = 400.0; // Ajusta al tamaño real de los items
final double position = index * itemHeight;
final double maxScroll = widget.scrollController.position.maxScrollExtent;
final double minScroll = widget.scrollController.position.minScrollExtent;

final double targetScroll = position.clamp(minScroll, maxScroll);

widget.scrollController.animateTo(
  targetScroll,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

}

void _handleKeyEvent(
{required KeyEvent event, required List trendingMovies}) {
if (event is KeyDownEvent) {
if (widget.focusTrendingSection.hasFocus) {
if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
focusedIndex = (focusedIndex + 1) % trendingMovies.length;
print(focusedIndex);

      setState(() {});
      _scrollToIndex(focusedIndex);
    } else if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
      focusedIndex = (focusedIndex - 1 + trendingMovies.length) %
          trendingMovies.length;
      print(focusedIndex);

      setState(() {});
      _scrollToIndex(focusedIndex);
    } else if (event.logicalKey == LogicalKeyboardKey.select) {
      //goRouter.goNamed(AppRoute.home.name);
    } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
      widget.focusMoreInfo.requestFocus();
      setState(() {});
      //_scrollPopularSection(0);
      //goRouter.goNamed(AppRoute.home.name);
    }
  }
}

}

@OverRide
Widget build(BuildContext context) {
return BlocBuilder<HomeCubit, HomeState>(
builder: (context, state) {
return Padding(
padding: const EdgeInsets.only(left: AppSpaces.l),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: AppSpaces.m,
),
Text(
'Trending',
style: Theme.of(context).textTheme.regularCaptionWhite.copyWith(
fontSize: 24,
fontWeight: FontWeight.w600,
color: AppColors.titleSection,
),
),
const SizedBox(
height: AppSpaces.xs,
),
state.getTrendingContentStatus.isLoading
? const SizedBox(
height: 250,
child: Center(
child: CustomCircularProgressIndicator(
color: AppColors.neutralWhite,
),
),
)
: Focus(
focusNode: widget.focusTrendingSection,
onKeyEvent: (node, event) {
_handleKeyEvent(
event: event,
trendingMovies: state.trendingContent);
return KeyEventResult.handled;
},
child: SizedBox(
height: 250,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: listController,
child: Row(
children: state.trendingContent
.asMap()
.entries
.map((entry) {
final index = entry.key;
final item = entry.value;
final isFocused = focusedIndex == index;
return Transform.scale(
scale: isFocused &&
widget.focusTrendingSection.hasFocus
? 1.0
: 0.9,
child: SizedBox(
width: 250,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'${Constants.urlBaseImage}${item.posterPath}',
fit: BoxFit.cover,
),
),
),
);
}).toList(),
),
)),
),
const SizedBox(
height: AppSpaces.l,
),
],
),
);
},
);
}
}

class CustomPageView extends StatefulWidget {
final List pages;
final Duration animationDuration;
final Curve animationCurve;
final FocusNode focusMoreInfo;
final FocusNode focusTrendingSection;
const CustomPageView({
Key? key,
required this.focusMoreInfo,
required this.pages,
required this.focusTrendingSection,
this.animationDuration = const Duration(milliseconds: 300),
this.animationCurve = Curves.easeInOut,
}) : super(key: key);

@OverRide
_CustomPageViewState createState() => _CustomPageViewState();
}

class _CustomPageViewState extends State {
int _currentPage = 0;
double _offset = 0.0;

void _onSwipe(double delta) {
setState(() {
_offset += delta;
});
}

void _onEndSwipe() {
if (_offset.abs() > 50) {
if (_offset < 0 && _currentPage < widget.pages.length - 1) {
_currentPage++;
} else if (_offset > 0 && _currentPage > 0) {
_currentPage--;
}
}
setState(() {
_offset = 0;
});
}

void _handleKeyEvent({required KeyEvent event}) {
if (event is KeyDownEvent) {
if (widget.focusMoreInfo.hasFocus) {
if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
_nextPage();
} else if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
_previousPage();
} else if (event.logicalKey == LogicalKeyboardKey.select) {
//goRouter.goNamed(AppRoute.home.name);
} else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
widget.focusTrendingSection.requestFocus();
setState(() {});
//_scrollPopularSection(0);
//goRouter.goNamed(AppRoute.home.name);
}
}
}
}

void _nextPage() {
if (_currentPage < widget.pages.length - 1) {
setState(() => _currentPage++);
}
}

void _previousPage() {
if (_currentPage > 0) {
setState(() => _currentPage--);
}
}

@OverRide
Widget build(BuildContext context) {
return /* GestureDetector(
onHorizontalDragUpdate: (details) => onSwipe(details.delta.dx),
onHorizontalDragEnd: () => _onEndSwipe(),
child: */
Focus(
autofocus: true,
focusNode: widget.focusMoreInfo,
onKeyEvent: (node, event) {
_handleKeyEvent(
event: event,
);
return KeyEventResult.handled;
},
child: Stack(
children: widget.pages.map((element) {
return element;
}).toList()

      /* ), */
      ),
);

}
}

[JSUYA]

That's a very long code, I just wanted snippet code to check for error messages.
I found code focusRightArrow.requestFocus(); in the initState() of _HomeScreenState in your code.

The error log meant that it is not finding the node. I think... It would be better to call it after the page is fully loaded(finished page building).

What I want to know is if this is an issue with the flutter-tizen (or tizen platform only)?
Did you get the same issue when building and testing with other platforms?

[github-actions]

This page has been automatically closed since there has not been any recent activity. If you are still experiencing a similar issue, please open a new issue with additional information about the issue.