[Tour of Beam][Frontend][apache#22600] TourScreen layout

* theme setup

* Replaced ThemeProvider with ThemeSwitchNotifier

* header with theme mode switcher and logo

* page container with header & footer

* theme mode tests

* renamed the directory to tour-of-beam

* compressed beam_logo.png

* added missing license comments

* rudimentary layout of the first screen

* review comments fixes #1

* moved notifyListeners inside then

* responsive todo

* split into 2 simple functions

* deleted redundant constants &
replaced 2018 text theme with 2021

* styling refinement

* home screen layout

* clickable sign in text

* font weights fix

* removed _getBaseFontTheme function

* fixed border and bg color

* color fixes

* difficulty component

* _LastModuleBody

* todo in test

* footer border

* fixed overflows

* replaced Project prefix with Tob

* replaced then with await

* inferred type

* started translation of the home screen

* sorted translations

* Complexity comments

* comment fixes

* home screen translations

* sign in overlay

* import fix

* integration test does not fail

* playground_components package with
dismissible_overlay

* missing license

* removed _dots from build

* widgets refinement

* renamed home screen to welcome screen

* deleted copyWith

* _SdkButton

* trailing comma & pubspec formatting

* license and lints

* license

* removed license from .metadata

* pubspec formatting

* total lints update

* changed from tour_of_beam to
tour-of-beam in build.gradle.kts

* license check

* _SdkButton mimics Radio button

* renamed MyApp to TourOfBeamApp

* onChanged mimics Radio button

Tour of Beam frontend blank project

[Tour of Beam][Frontend][apache#22600] TourScreen layout

TourScreen layout (apache#22600)

common theme, constants, split view

missing license

flutter_gen, summary layout details

content layout details

no functional widgets in split view

main screen todos & translation

main screen todos & translation

comment fixes #1

ExpansionTileWrapper

SplitViewController

lists in tour screen widgets

comment fixes #1 (31.08)

split view package in PGC

fixed button overflow

splitter theme color

comment fixes #2 (31.08)

gradlew check

welcome screen overflow test (apache#22600)

SDK dropdown (apache#22600)

flexible complete unit OutlinedButton (apache#22600)

renamed PageContainer to TobScaffold

dropdown style refinement

DropdownButton implicit type

sdk instead of e

licenses apache#22600

renamed _ShrinkedTour to _NarrowTour apache#22600

tour screen style refinement apache#22600

BeamDivider in PGC apache#22600

removed todo, added license apache#22600

built with text apache#22600

_WideWelcome with IntrinsicHeight (apache#22600)

Co-Authored-By: darkhan.nausharipov <[email protected]>

learning/tour-of-beam/frontend/assets/translations/en.yaml

@@ -16,6 +16,7 @@
 #  under the License.
 
 ui:
+  builtWith: 'Built with Apache Beam'
   copyright: '© The Apache Software Foundation'
   darkMode: 'Dark Mode'
   lightMode: 'Light Mode'
@@ -31,6 +32,9 @@ pages:
     signIn: ' sign in.'
     selectLanguage: 'Please select the default language (you may change the language at any time):'
     startLearning: 'Start learning'
+  tour:
+    summaryTitle: 'Table of Contents'
+    completeUnit: 'Complete Unit'
 dialogs:
   signInIf: If you would like to save your progress and track completed modules
 complexity:

learning/tour-of-beam/frontend/integration_test/app_test.dart

@@ -19,7 +19,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
-import 'package:tour_of_beam/components/toggle_theme_button.dart';
+import 'package:playground_components/playground_components.dart';
 import 'package:tour_of_beam/main.dart' as app;
 
 void main() {

learning/tour-of-beam/frontend/lib/components/expansion_tile_wrapper.dart

@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+
+class ExpansionTileWrapper extends StatelessWidget {
+  final ExpansionTile expansionTile;
+  const ExpansionTileWrapper({required this.expansionTile});
+
+  @override
+  Widget build(BuildContext context) {
+    return Theme(
+      data: Theme.of(context).copyWith(
+        hoverColor: Colors.transparent,
+        splashColor: Colors.transparent,
+        highlightColor: Colors.transparent,
+        dividerColor: Colors.transparent,
+        unselectedWidgetColor: Colors.grey,
+        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.grey),
+        visualDensity: const VisualDensity(vertical: -4),
+        listTileTheme: const ListTileThemeData(dense: true),
+      ),
+      child: expansionTile,
+    );
+  }
+}

learning/tour-of-beam/frontend/lib/components/filler_text.dart

@@ -0,0 +1,29 @@
+/*
+		* Licensed to the Apache Software Foundation (ASF) under one
+		* or more contributor license agreements.  See the NOTICE file
+		* distributed with this work for additional information
+		* regarding copyright ownership.  The ASF licenses this file
+		* to you under the Apache License, Version 2.0 (the
+		* "License"); you may not use this file except in compliance
+		* with the License.  You may obtain a copy of the License at
+		*
+		*     http://www.apache.org/licenses/LICENSE-2.0
+		*
+		* Unless required by applicable law or agreed to in writing, software
+		* distributed under the License is distributed on an "AS IS" BASIS,
+		* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+		* See the License for the specific language governing permissions and
+		* limitations under the License.
+		*/
+
+import 'package:flutter/material.dart';
+
+class FillerText extends StatelessWidget {
+  final int width;
+  const FillerText({required this.width});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(''.padRight(width, 'Just a filler text '));
+  }
+}

learning/tour-of-beam/frontend/lib/components/footer.dart

@@ -18,10 +18,9 @@
 
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:playground_components/playground_components.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-import '../config/theme/colors_provider.dart';
-import '../constants/links.dart';
 import '../constants/sizes.dart';
 
 class Footer extends StatelessWidget {
@@ -31,12 +30,25 @@ class Footer extends StatelessWidget {
   Widget build(BuildContext context) {
     return _Body(
       child: Wrap(
-        spacing: TobSizes.size16,
+        alignment: WrapAlignment.spaceBetween,
         crossAxisAlignment: WrapCrossAlignment.center,
         children: [
-          const _ReportIssueButton(),
-          const _PrivacyPolicyButton(),
-          const Text('ui.copyright').tr(),
+          Wrap(
+            spacing: BeamSizes.size16,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            children: [
+              const _ReportIssueButton(),
+              const _PrivacyPolicyButton(),
+              const Text('ui.copyright').tr(),
+            ],
+          ),
+          // TODO(nausharipov): get version
+          Text(
+            '${'ui.builtWith'.tr()} 2.40.0',
+            style: const TextStyle(
+              color: BeamColors.grey3,
+            ),
+          ),
         ],
       ),
     );
@@ -50,18 +62,18 @@ class _Body extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: double.infinity,
+      height: TobSizes.footerHeight,
       padding: const EdgeInsets.symmetric(
-        vertical: TobSizes.size4,
-        horizontal: TobSizes.size16,
+        vertical: BeamSizes.size4,
+        horizontal: BeamSizes.size16,
       ),
       decoration: BoxDecoration(
         color: ThemeColors.of(context).secondaryBackground,
         border: Border(
           top: BorderSide(color: ThemeColors.of(context).divider),
         ),
       ),
-      height: TobSizes.footerHeight,
-      width: double.infinity,
       child: child,
     );
   }
@@ -75,7 +87,7 @@ class _ReportIssueButton extends StatelessWidget {
     return TextButton(
       style: _linkButtonStyle,
       onPressed: () {
-        launchUrl(Uri.parse(TobLinks.reportIssue));
+        launchUrl(Uri.parse(BeamLinks.reportIssue));
       },
       child: const Text('ui.reportIssue').tr(),
     );
@@ -90,7 +102,7 @@ class _PrivacyPolicyButton extends StatelessWidget {
     return TextButton(
       style: _linkButtonStyle,
       onPressed: () {
-        launchUrl(Uri.parse(TobLinks.privacyPolicy));
+        launchUrl(Uri.parse(BeamLinks.privacyPolicy));
       },
       child: const Text('ui.privacyPolicy').tr(),
     );

learning/tour-of-beam/frontend/lib/components/logo.dart

@@ -17,9 +17,7 @@
  */
 
 import 'package:flutter/material.dart';
-
-import '../constants/assets.dart';
-import '../constants/sizes.dart';
+import 'package:playground_components/playground_components.dart';
 
 class Logo extends StatelessWidget {
   const Logo();
@@ -28,12 +26,9 @@ class Logo extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       mainAxisSize: MainAxisSize.min,
-      children: [
-        Image.asset(
-          TobAssets.beamLogo,
-          height: TobIconSizes.large,
-        ),
-        const _Text(),
+      children: const [
+        BeamLogo(),
+        _Text(),
       ],
     );
   }

learning/tour-of-beam/frontend/lib/components/page_container.dart → learning/tour-of-beam/frontend/lib/components/scaffold.dart

@@ -17,17 +17,17 @@
  */
 
 import 'package:flutter/material.dart';
+import 'package:playground_components/playground_components.dart';
 
-import '../constants/sizes.dart';
 import 'footer.dart';
 import 'logo.dart';
+import 'sdk_dropdown.dart';
 import 'sign_in/sign_in_button.dart';
-import 'toggle_theme_button.dart';
 
-class PageContainer extends StatelessWidget {
+class TobScaffold extends StatelessWidget {
   final Widget child;
 
-  const PageContainer({
+  const TobScaffold({
     super.key,
     required this.child,
   });
@@ -38,9 +38,10 @@ class PageContainer extends StatelessWidget {
       appBar: AppBar(
         title: const Logo(),
         actions: const [
+          SdkDropdown(),
           ToggleThemeButton(),
           SignInButton(),
-          SizedBox(width: TobSizes.size16),
+          SizedBox(width: BeamSizes.size16),
         ],
       ),
       body: Column(

learning/tour-of-beam/frontend/lib/components/sdk_dropdown.dart

@@ -0,0 +1,66 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:playground_components/playground_components.dart';
+
+class SdkDropdown extends StatelessWidget {
+  const SdkDropdown();
+
+  @override
+  Widget build(BuildContext context) {
+    return _DropdownWrapper(
+      child: DropdownButton(
+        value: 'Java',
+        onChanged: (sdk) {
+          // TODO(nausharipov): change SDK
+        },
+        items: const ['Java', 'Python', 'Go']
+            .map(
+              (sdk) => DropdownMenuItem(
+                value: sdk,
+                child: Text(sdk),
+              ),
+            )
+            .toList(),
+        isDense: true,
+        alignment: Alignment.center,
+        focusColor: Colors.transparent,
+        borderRadius: BorderRadius.circular(BeamSizes.size6),
+      ),
+    );
+  }
+}
+
+class _DropdownWrapper extends StatelessWidget {
+  final Widget child;
+  const _DropdownWrapper({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(BeamSizes.size10),
+      padding: const EdgeInsets.all(BeamSizes.size2),
+      decoration: BoxDecoration(
+        color: Theme.of(context).hoverColor,
+        borderRadius: BorderRadius.circular(BeamSizes.size6),
+      ),
+      child: DropdownButtonHideUnderline(child: child),
+    );
+  }
+}

learning/tour-of-beam/frontend/lib/components/sign_in/sign_in_button.dart

@@ -18,9 +18,8 @@
 
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:playground_components/dismissible_overlay.dart';
+import 'package:playground_components/playground_components.dart';
 
-import '../../constants/sizes.dart';
 import 'sign_in_overlay_content.dart';
 
 class SignInButton extends StatefulWidget {
@@ -47,8 +46,8 @@ class _SignInButtonState extends State<SignInButton> {
           overlay?.remove();
         },
         child: const Positioned(
-          right: TobSizes.size10,
-          top: TobSizes.appBarHeight,
+          right: BeamSizes.size10,
+          top: BeamSizes.appBarHeight,
           child: SignInOverlayContent(),
         ),
       ),