Skip to content

refactor(ui): appbar redesigned #2560

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.

Sign up for GitHub

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

Merged
Brazol merged 11 commits into from
Mar 27, 2026
Merged

refactor(ui): appbar redesigned #2560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
113be9e
appbar redesigned
Brazol Mar 23, 2026
b093fa7
format fix
Brazol Mar 23, 2026
1e4bb6e
mention color fix
Brazol Mar 23, 2026
67a3bbe
Merge branch 'feat/design-refresh' into feat/appbar-redesign
Brazol Mar 24, 2026
0e0857e
chore: Update Goldens
Brazol Mar 24, 2026
5bf173d
moved base app bar to core
Brazol Mar 25, 2026
330ca35
fix(ui): ui and translation fixes (#2564)
Brazol Mar 25, 2026
fba635c
core dep
Brazol Mar 27, 2026
96322e7
Merge branch 'feat/design-refresh' into feat/appbar-redesign
Brazol Mar 27, 2026
c354988
Merge branch 'feat/design-refresh' into feat/appbar-redesign
Brazol Mar 27, 2026
bad74ae
removed old appbar
Brazol Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 68 additions & 54 deletions packages/stream_chat_flutter/lib/src/channel/channel_header.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_core_flutter/stream_core_flutter.dart';

/// {@template streamChannelHeader}
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/packages/stream_chat_flutter/screenshots/channel_header.png)
Expand Down Expand Up @@ -63,7 +63,7 @@ class StreamChannelHeader extends StatelessWidget implements PreferredSizeWidget
this.showConnectionStateTile = false,
this.title,
this.subtitle,
this.centerTitle,
this.centerTitle = true,
this.leading,
this.actions,
this.bottom,
Expand Down Expand Up @@ -104,7 +104,7 @@ class StreamChannelHeader extends StatelessWidget implements PreferredSizeWidget
final Widget? subtitle;

/// Whether the title should be centered
final bool? centerTitle;
final bool centerTitle;

/// Leading widget
final Widget? leading;
Expand Down Expand Up @@ -173,75 +173,89 @@ class StreamChannelHeader extends StatelessWidget implements PreferredSizeWidget
break;
}

final theme = Theme.of(context);
final colorScheme = context.streamColorScheme;

return StreamInfoTile(
showMessage: showConnectionStateTile && showStatus,
message: statusString,
child: AppBar(
toolbarTextStyle: theme.textTheme.bodyMedium,
titleTextStyle: theme.textTheme.titleLarge,
systemOverlayStyle: theme.brightness == Brightness.dark
? SystemUiOverlayStyle.light
: SystemUiOverlayStyle.dark,
child: StreamAppBar(
titleTextStyle: Theme.of(context).textTheme.titleLarge,
elevation: elevation,
scrolledUnderElevation: scrolledUnderElevation,
leading: leadingWidget,
leading: Padding(
padding: EdgeInsets.only(left: context.streamSpacing.sm),
child: leadingWidget,
),
leadingWidth: StreamAvatarSize.lg.value,
titleSpacing: context.streamSpacing.sm,
bottom: bottom,
bottomOpacity: bottomOpacity,
shape: LinearBorder(
side: BorderSide(
color: colorScheme.borderDefault,
width: 1,
),
bottom: const LinearBorderEdge(),
),
backgroundColor: backgroundColor ?? channelHeaderTheme.color,
actions:
actions ??
<Widget>[
Padding(
padding: const EdgeInsets.only(right: 10),
child: Center(
child: GestureDetector(
onTap: onImageTap,
child: StreamChannelAvatar(
size: .lg,
channel: channel,
if (effectiveCenterTitle)
Padding(
padding: EdgeInsets.only(right: context.streamSpacing.sm),
child: Center(
child: GestureDetector(
onTap: onImageTap,
child: StreamChannelAvatar(
size: .lg,
channel: channel,
),
),
),
),
),
],
centerTitle: centerTitle,
title: InkWell(
onTap: onTitleTap,
child: SizedBox(
height: preferredSize.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: effectiveCenterTitle ? CrossAxisAlignment.center : CrossAxisAlignment.stretch,
children: <Widget>[
title ??
StreamChannelName(
channel: channel,
textStyle:
channelHeaderTheme.titleStyle ??
context.streamTextTheme.headingSm.copyWith(
color: context.streamColorScheme.textPrimary,
title: Row(
spacing: context.streamSpacing.sm,
children: [
if (!effectiveCenterTitle) ...[
GestureDetector(
onTap: onImageTap,
child: StreamChannelAvatar(
size: .lg,
channel: channel,
),
),
],
Expanded(
child: InkWell(
onTap: onTitleTap,
child: SizedBox(
height: preferredSize.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: effectiveCenterTitle
? CrossAxisAlignment.center
: CrossAxisAlignment.stretch,
children: <Widget>[
title ??
StreamChannelName(
channel: channel,
textStyle:
channelHeaderTheme.titleStyle ??
context.streamTextTheme.headingSm.copyWith(
color: context.streamColorScheme.textPrimary,
),
),
),
const SizedBox(height: 2),
subtitle ??
StreamChannelInfo(
showTypingIndicator: showTypingIndicator,
channel: channel,
textStyle: channelHeaderTheme.subtitleStyle,
),
],
const SizedBox(height: 2),
subtitle ??
StreamChannelInfo(
showTypingIndicator: showTypingIndicator,
channel: channel,
textStyle:
channelHeaderTheme.subtitleStyle ??
context.streamTextTheme.captionDefault.copyWith(
color: context.streamColorScheme.textSecondary,
),
),
],
),
),
),
),
),
],
),
),
);
Expand Down
55 changes: 21 additions & 34 deletions packages/stream_chat_flutter/lib/src/channel/channel_list_header.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:stream_chat_flutter/src/misc/empty_widget.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
Expand Down Expand Up @@ -50,7 +49,7 @@ class StreamChannelListHeader extends StatelessWidget implements PreferredSizeWi
this.showConnectionStateTile = false,
this.preNavigationCallback,
this.subtitle,
this.centerTitle,
this.centerTitle = true,
this.leading,
this.actions,
this.backgroundColor,
Expand Down Expand Up @@ -82,7 +81,7 @@ class StreamChannelListHeader extends StatelessWidget implements PreferredSizeWi
final Widget? subtitle;

/// Whether the title should be centered
final bool? centerTitle;
final bool centerTitle;

/// Leading widget
///
Expand Down Expand Up @@ -130,49 +129,39 @@ class StreamChannelListHeader extends StatelessWidget implements PreferredSizeWi
}

final channelListHeaderThemeData = StreamChannelListHeaderTheme.of(context);
final theme = Theme.of(context);
final colorScheme = context.streamColorScheme;

return StreamInfoTile(
showMessage: showConnectionStateTile && showStatus,
message: statusString,
child: AppBar(
toolbarTextStyle: theme.textTheme.bodyMedium,
titleTextStyle: theme.textTheme.titleLarge,
systemOverlayStyle: theme.brightness == Brightness.dark
? SystemUiOverlayStyle.light
: SystemUiOverlayStyle.dark,
child: StreamAppBar(
elevation: elevation,
scrolledUnderElevation: scrolledUnderElevation,
backgroundColor: backgroundColor ?? channelListHeaderThemeData.color,
centerTitle: centerTitle,
shape: LinearBorder(
side: BorderSide(
color: colorScheme.borderDefault,
width: 1,
),
bottom: const LinearBorderEdge(),
),
leading: switch ((leading, user)) {
(final leading?, _) => leading,
(_, final user?) => Center(
child: GestureDetector(
onTap: switch (onUserAvatarTap) {
final onTap? => () => onTap(user),
_ => () {
preNavigationCallback?.call();
Scaffold.of(context).openDrawer();
(_, final user?) => Padding(
padding: EdgeInsets.only(left: context.streamSpacing.sm),
child: Center(
child: GestureDetector(
onTap: switch (onUserAvatarTap) {
final onTap? => () => onTap(user),
_ => () {
preNavigationCallback?.call();
Scaffold.of(context).openDrawer();
},
},
},
child: StreamUserAvatar(
size: .lg,
user: user,
showOnlineIndicator: false,
child: StreamUserAvatar(
size: .lg,
user: user,
showOnlineIndicator: false,
),
),
),
),
_ => const Empty(),
},
actionsPadding: EdgeInsets.only(right: context.streamSpacing.sm),
actions:
actions ??
[
Expand Down Expand Up @@ -222,12 +211,10 @@ class StreamChannelListHeader extends StatelessWidget implements PreferredSizeWi
class _ConnectedTitleState extends StatelessWidget {
@override
Widget build(BuildContext context) {
final chatThemeData = StreamChatTheme.of(context);
final textTheme = context.streamTextTheme;
return Text(
context.translations.streamChatLabel,
style: chatThemeData.textTheme.headlineBold.copyWith(
color: chatThemeData.colorTheme.textHighEmphasis,
),
style: textTheme.headingSm,
);
}
}
Expand Down
21 changes: 10 additions & 11 deletions packages/stream_chat_flutter/lib/src/gallery/gallery_header.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:stream_chat_flutter/src/attachment_actions_modal/attachment_actions_modal.dart';
import 'package:stream_chat_flutter/src/misc/empty_widget.dart';
import 'package:stream_chat_flutter/src/theme/stream_chat_theme.dart';
Expand Down Expand Up @@ -78,18 +77,16 @@ class StreamGalleryHeader extends StatelessWidget implements PreferredSizeWidget
@override
Widget build(BuildContext context) {
final galleryHeaderThemeData = StreamGalleryHeaderTheme.of(context);
final theme = Theme.of(context);
return AppBar(
toolbarTextStyle: theme.textTheme.bodyMedium,
titleTextStyle: theme.textTheme.titleLarge,
systemOverlayStyle: theme.brightness == Brightness.dark ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark,
final textTheme = context.streamTextTheme;

return StreamAppBar(
elevation: elevation,
leading: showBackButton
? IconButton(
icon: Icon(
context.streamIcons.crossMedium,
context.streamIcons.arrowLeft,
color: galleryHeaderThemeData.closeButtonColor,
size: 24,
size: 20,
),
onPressed: onBackPressed,
)
Expand All @@ -100,7 +97,7 @@ class StreamGalleryHeader extends StatelessWidget implements PreferredSizeWidget
if (!message.isEphemeral)
IconButton(
icon: Icon(
context.streamIcons.dotsGrid1x3Vertical,
context.streamIcons.dotGrid1x3Horizontal,
color: galleryHeaderThemeData.iconMenuPointColor,
),
onPressed: () => _showMessageActionModalBottomSheet(context),
Expand All @@ -119,11 +116,13 @@ class StreamGalleryHeader extends StatelessWidget implements PreferredSizeWidget
children: <Widget>[
Text(
userName,
style: galleryHeaderThemeData.titleTextStyle,
style: galleryHeaderThemeData.titleTextStyle ?? textTheme.headingSm,
),
Text(
sentAt,
style: galleryHeaderThemeData.subtitleTextStyle,
style:
galleryHeaderThemeData.subtitleTextStyle ??
textTheme.captionDefault.copyWith(color: context.streamColorScheme.textSecondary),
),
],
),
Expand Down
36 changes: 36 additions & 0 deletions packages/stream_chat_flutter/lib/src/localization/translations.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,6 +597,24 @@ abstract class Translations {

/// The text displaying the reminder time (e.g. "Today at 3:00 PM").
String reminderAtText(String time);

/// The label for "Create a poll and let everyone vote!"
String get createPollPromptLabel;

/// The label for "Take a photo and share"
String get takePhotoAndShareLabel;

/// The label for "Take a video and share"
String get takeVideoAndShareLabel;

/// The label for "Open camera"
String get openCameraLabel;

/// The label for "Select files to share"
String get selectFilesToShareLabel;

/// The label for "Open files"
String get openFilesLabel;
}

/// Default implementation of Translation strings for the stream chat widgets
Expand Down Expand Up @@ -1308,4 +1326,22 @@ Attachment limit exceeded: it's not possible to add more than $limit attachments

@override
String reminderAtText(String time) => 'Today at $time';

@override
String get createPollPromptLabel => 'Create a poll and let everyone vote!';

@override
String get takePhotoAndShareLabel => 'Take a photo and share';

@override
String get takeVideoAndShareLabel => 'Take a video and share';

@override
String get openCameraLabel => 'Open camera';

@override
String get selectFilesToShareLabel => 'Select files to share';

@override
String get openFilesLabel => 'Open files';
}
Loading
Loading