-
-
Notifications
You must be signed in to change notification settings - Fork 147
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 make tabBar item responsive? #139
Comments
This is best I can make it to responsive. But for iPad the icon size is not changing. SDK:
Plugin:
CODE:
listWidgets A
|
@NTMS2017 The default example look fine on iPad mini4, so are you trying to make icon bigger on iPad? One more thing, I would suggest you ti provide two different /// CLASS STYLE
class Style2 extends StyleHook {
@override
double get activeIconSize => 40 ;
@override
double get activeIconMargin => 5;
@override
double get iconSize => 50;
@override
TextStyle textStyle(Color color) {
return TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold);
}
} The style feature is limited. So if you can not make the tab to satisfy your case, you can make a custom one with other constructor, which allow you to define the tab by yourself. /// Define a custom tab style by implement a [DelegateBuilder].
///
/// ```dart
/// ConvexAppBar(
/// count: 5,
/// itemBuilder: Builder(),
/// )
///
/// class Builder extends DelegateBuilder {
/// @override
/// Widget build(BuildContext context, int index, bool active) {
/// return Text('TAB $index');
/// }
/// }
/// ```
const ConvexAppBar.builder({
Key? key,
required this.itemBuilder,
required this.count,
this.initialActiveIndex,
this.disableDefaultTabController = false,
this.onTap,
this.onTapNotify,
this.controller,
this.backgroundColor,
this.gradient,
this.height,
this.curveSize,
this.top,
this.elevation,
this.cornerRadius,
this.curve = Curves.easeInOut,
this.chipBuilder,
}) |
Yes I am trying to make icon bigger on iPad. I will try your suggestion to make 2 different style. And write here the result |
Sorry :( couldn't make it. Do you have any custom (Define a custom tab style by implement a [DelegateBuilder].) example? If you can provide I will appreciated. Thanks |
@avenwu you are saying there you can customize everything, yes you are right.. but alsmot from scratch because you are not exposing things like |
Hi,
With a custom appear sample I try to make tabBar item responsive but seems margin and StyleHook is not allow me to make a more responsive.
For my app I use flutter_screenutil and auto_size_text plugin for responsive ui design. But can't make to work with tabor item.
Without modification (still not work as expected) the appear item looks too small on iPad mini4.
With current modification image is below.
Also I couldn't find any "tabContent" example and usage in your example apps. It looks If I can modify tabContent I might be able to make tabor items more responsive.
Any idea?
Note: In main.dart I use ScreenUtilInit(designSize: Size(360, 690),... for my design draft. I can change a different UI draft but output still same.
The text was updated successfully, but these errors were encountered: