Fix tab block transparent view.

example/lib/transparent.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import 'package:vertical_tabs_flutter/vertical_tabs.dart';
+
+void main() => runApp(const Home());
+
+class Home extends StatelessWidget {
+  const Home({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Title',
+      home: Scaffold(
+        body: SafeArea(
+          child: Column(
+            children: <Widget>[
+              const Padding(
+                  padding: EdgeInsets.all(8),
+                  child: Text(
+                      "This example shows difference of VerticalTabs widget rendering with transparent background of bar tabs, when materialType is set to transparent and to canvas (default) values.")),
+              const Divider(
+                height: 20,
+                color: Colors.black87,
+              ),
+              const Padding(
+                  padding: EdgeInsets.all(8),
+                  child: Text(
+                      "This widget has Material.type set to MaterialType.canvas, as it is set by default")),
+              exampleWidget(MaterialType.canvas),
+              const Divider(
+                height: 20,
+                color: Colors.black87,
+              ),
+              const Padding(
+                  padding: EdgeInsets.all(8),
+                  child: Text(
+                      "This widget has Material.type set to MaterialType.transparent as it is recommended to configure for a transparent piece of material")),
+              exampleWidget(MaterialType.transparency),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  SizedBox exampleWidget(MaterialType materialType) {
+    final tabTextStyle =
+        TextStyle(color: Colors.blue.withOpacity(0.7), fontSize: 20);
+    return SizedBox(
+      height: 300,
+      child: Container(
+        decoration: const BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage('assets/images/background_1.png'),
+            fit: BoxFit.cover,
+          ),
+        ),
+        //child: const Text("test"),
+        child: VerticalTabs(
+          tabsWidth: 150,
+          direction: TextDirection.ltr,
+          changePageDuration: const Duration(milliseconds: 500),
+          backgroundColor: Colors.transparent,
+          selectedTabBackgroundColor: Colors.white.withOpacity(0.5),
+          tabBackgroundColor: Colors.transparent,
+          materialType: materialType,
+          tabs: <Tab>[
+            Tab(
+                child: Text('Flutter', style: tabTextStyle),
+                icon: const Icon(Icons.phone, color: Colors.white)),
+            tabTitle('Dart'),
+            Tab(
+              child: Container(
+                color: Colors.green.withOpacity(0.3),
+                margin: const EdgeInsets.only(bottom: 1),
+                child: Row(
+                  children: <Widget>[
+                    Icon(Icons.favorite, color: Colors.blue.withOpacity(0.3)),
+                    const SizedBox(width: 25),
+                    Text('JS', style: tabTextStyle),
+                  ],
+                ),
+              ),
+            ),
+            tabTitle('NodeJS'),
+            tabTitle('PHP'),
+          ],
+          contents: <Widget>[
+            tabsContent('Flutter',
+                'You can change page by scrolling content horizontally'),
+            tabsContent('Dart'),
+            tabsContent('Javascript'),
+            tabsContent('NodeJS'),
+            Container(
+                color: Colors.black12,
+                child: ListView.builder(
+                    itemCount: 10,
+                    itemExtent: 100,
+                    scrollDirection: Axis.vertical,
+                    itemBuilder: (context, index) {
+                      return Container(
+                        margin: const EdgeInsets.all(10),
+                        color: Colors.white.withOpacity(0.4),
+                      );
+                    })),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget tabsContent(String caption, [String description = '']) {
+    return Container(
+      margin: const EdgeInsets.all(10),
+      padding: const EdgeInsets.all(20),
+      color: Colors.black12,
+      child: Column(
+        children: <Widget>[
+          Text(
+            caption,
+            style: const TextStyle(fontSize: 25, color: Colors.white),
+          ),
+          const Divider(
+            height: 20,
+            color: Colors.white,
+          ),
+          Text(
+            description,
+            style: const TextStyle(fontSize: 15, color: Colors.white),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Tab tabTitle(String title) {
+    final tabTextStyle =
+        TextStyle(color: Colors.blue.withOpacity(0.7), fontSize: 20);
+    return Tab(
+      child: Text(title, style: tabTextStyle),
+    );
+  }
+}

example/pubspec.lock

@@ -5,58 +5,58 @@ packages:
     dependency: transitive
     description:
       name: async
-      url: "https://pub.dartlang.org"
+      sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0
+      url: "https://pub.dev"
     source: hosted
-    version: "2.8.2"
+    version: "2.10.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
-      url: "https://pub.dartlang.org"
+      sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   characters:
     dependency: transitive
     description:
       name: characters
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.2.0"
-  charcode:
-    dependency: transitive
-    description:
-      name: charcode
-      url: "https://pub.dartlang.org"
+      sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c
+      url: "https://pub.dev"
     source: hosted
-    version: "1.3.1"
+    version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
-      url: "https://pub.dartlang.org"
+      sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf
+      url: "https://pub.dev"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   collection:
     dependency: transitive
     description:
       name: collection
-      url: "https://pub.dartlang.org"
+      sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0
+      url: "https://pub.dev"
     source: hosted
-    version: "1.15.0"
+    version: "1.17.0"
   cupertino_icons:
     dependency: "direct main"
     description:
       name: cupertino_icons
-      url: "https://pub.dartlang.org"
+      sha256: "1989d917fbe8e6b39806207df5a3fdd3d816cbd090fac2ce26fb45e9a71476e5"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
   fake_async:
     dependency: transitive
     description:
       name: fake_async
-      url: "https://pub.dartlang.org"
+      sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78"
+      url: "https://pub.dev"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -66,49 +66,63 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      url: "https://pub.dartlang.org"
+      sha256: b543301ad291598523947dc534aaddc5aaad597b709d2426d3a0e0d44c5cb493
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.6.5"
   lints:
     dependency: transitive
     description:
       name: lints
-      url: "https://pub.dartlang.org"
+      sha256: a2c3d198cb5ea2e179926622d433331d8b58374ab8f29cdda6e863bd62fd369c
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.1"
   matcher:
     dependency: transitive
     description:
       name: matcher
-      url: "https://pub.dartlang.org"
+      sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72"
+      url: "https://pub.dev"
     source: hosted
-    version: "0.12.11"
+    version: "0.12.13"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      url: "https://pub.dartlang.org"
+      sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
+      url: "https://pub.dev"
     source: hosted
-    version: "0.1.3"
+    version: "0.2.0"
   meta:
     dependency: transitive
     description:
       name: meta
-      url: "https://pub.dartlang.org"
+      sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42"
+      url: "https://pub.dev"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0"
   path:
     dependency: transitive
     description:
       name: path
-      url: "https://pub.dartlang.org"
+      sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b
+      url: "https://pub.dev"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.2"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -118,58 +132,58 @@ packages:
     dependency: transitive
     description:
       name: source_span
-      url: "https://pub.dartlang.org"
+      sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
+      url: "https://pub.dev"
     source: hosted
-    version: "1.8.1"
+    version: "1.9.1"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
-      url: "https://pub.dartlang.org"
+      sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
+      url: "https://pub.dev"
     source: hosted
-    version: "1.10.0"
+    version: "1.11.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
-      url: "https://pub.dartlang.org"
+      sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
-      url: "https://pub.dartlang.org"
+      sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
+      url: "https://pub.dev"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
-      url: "https://pub.dartlang.org"
+      sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84
+      url: "https://pub.dev"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
-      url: "https://pub.dartlang.org"
+      sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
+      url: "https://pub.dev"
     source: hosted
-    version: "0.4.8"
-  typed_data:
-    dependency: transitive
-    description:
-      name: typed_data
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.0"
+    version: "0.4.16"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
-      url: "https://pub.dartlang.org"
+      sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.1"
+    version: "2.1.4"
   vertical_tabs_flutter:
     dependency: "direct main"
     description:
@@ -178,5 +192,5 @@ packages:
     source: path
     version: "1.0.0"
 sdks:
-  dart: ">=2.16.1 <3.0.0"
+  dart: ">=2.18.0 <3.0.0"
   flutter: ">=1.17.0"

example/pubspec.yaml

@@ -63,6 +63,8 @@ flutter:
   # assets:
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/images/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.