add

Author: TOPWN

.idea/workspace.xml

@@ -25,6 +25,8 @@ import 'material/DraggableDemo.dart';
 import 'material/animation/AnimationPage.dart';
 import 'material/paint/CustomPainterDemo.dart';
 import 'material/animation/AnimationBuilderDemo.dart';
+import 'material/animation/WavyHeaderImage.dart';
+import 'material/BackdropFilterDemo.dart';
 
 void main() => runApp(
       //The => expr syntax is a shorthand for { return expr; }. The => notation is sometimes referred to as arrow syntax.
@@ -55,7 +57,7 @@ class MyApp extends StatelessWidget {
 //        products: initProducts(),
 //      ),
 //      home: BasicAppBarSample(),
-      home: TabBarDemo(),
+//      home: TabBarDemo(),
 //      home: AppBarBottomSample(),
 //      home: ListViewDemo(),
 //      home: TextFieldSample(),
@@ -74,6 +76,8 @@ class MyApp extends StatelessWidget {
 //      home: AnimationPage(),
 //      home: CustomPainterDemo(),
 //      home: AnimationBuilderDemo(),
+//      home: WavyHeaderPage(),
+      home: BackdropFilterPage(),
     );
   }
 }

lib/main.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'dart:ui';
+
+class BackdropFilterPage extends StatefulWidget {
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<BackdropFilterPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: _WavyHeaderImage(),
+    );
+  }
+}
+
+class _WavyHeaderImage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new Stack(
+      children: <Widget>[
+        new Positioned(
+            left: 0.0,
+            top: 0.0,
+            right: 0.0,
+            bottom: 0.0,
+            child: new Image.asset(
+              'images/2018.jpg',
+              fit: BoxFit.fill,
+            )),
+        new Positioned(
+          top: 200.0,
+          left: 100.0,
+          right: 100.0,
+          bottom: 200.0,
+          child: new BackdropFilter(
+            filter: new ImageFilter.blur(sigmaX: 12.0, sigmaY: 12.0),
+//              child: new Text(
+//                'test',
+//                style: Theme.of(context).textTheme.headline,
+//                textAlign: TextAlign.center,
+//                maxLines: 1,
+//              ),
+            child: new Container(
+              color: const Color.fromRGBO(0, 0, 0, 0.5),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/material/BackdropFilterDemo.dart

@@ -1,10 +1,53 @@
 import 'package:flutter/material.dart';
 
-class TabBarDemo extends StatelessWidget {
+class TabBarDemo extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return TabBarState();
+  }
+}
+
+class TabBarState extends State<TabBarDemo>
+    with SingleTickerProviderStateMixin {
+  Color _themeColor = Colors.blue;
+  TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 3, initialIndex: 0, vsync: this);
+    _tabController.addListener(getCurrentIndex);
+  }
+
+  void getCurrentIndex() {
+    print("currentIndex:${_tabController.index}");
+    setState(() {
+      switch (_tabController.index) {
+        case 0:
+          _themeColor = Colors.blue;
+          break;
+        case 1:
+          _themeColor = Colors.red;
+          break;
+        case 2:
+          _themeColor = Colors.black38;
+          break;
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return DefaultTabController(
-      length: 3,
+    return Theme(
+      data: ThemeData(
+        primaryColor: _themeColor,
+      ),
       child: Scaffold(
         appBar: AppBar(
           bottom: TabBar(
@@ -13,6 +56,16 @@ class TabBarDemo extends StatelessWidget {
               Tab(text: "Train", icon: Icon(Icons.directions_transit)),
               Tab(text: "Bike", icon: Icon(Icons.directions_bike)),
             ],
+            controller: _tabController,
+//            indicator: ShapeDecoration(
+//              color: Colors.white,
+//              shape: RoundedRectangleBorder(
+//                borderRadius: BorderRadius.all(
+//                  Radius.circular(10),
+//                ),
+//              ),
+//            ),
+            indicatorColor: Colors.white,
           ),
           title: Text('Tabs Demo'),
         ),
@@ -22,16 +75,18 @@ class TabBarDemo extends StatelessWidget {
             Icon(Icons.directions_transit),
             Icon(Icons.directions_bike),
           ],
+          controller: _tabController,
         ),
         bottomNavigationBar: Container(
           height: 60.0,
-          color: Colors.blue[500],
+          color: _themeColor,
           child: TabBar(
             tabs: [
               Tab(text: "Car", icon: Icon(Icons.directions_car)),
               Tab(text: "Train", icon: Icon(Icons.directions_transit)),
               Tab(text: "Bike", icon: Icon(Icons.directions_bike)),
             ],
+            controller: _tabController,
           ),
         ),
         drawer: Container(

lib/material/TabBarSample.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class WavyHeaderPage extends StatefulWidget {
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<WavyHeaderPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: _WavyHeaderImage(),
+    );
+  }
+}
+
+class _WavyHeaderImage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ClipPath(
+      child: Image.asset('images/2018.jpg'),
+      clipper: BottomWaveClipper(),
+    );
+  }
+}
+
+class BottomWaveClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    var path = Path();
+    path.lineTo(0.0, size.height - 20);
+    var firstControlPoint = Offset(size.width / 4, size.height);
+    var firstEndPoint = Offset(size.width / 2.25, size.height - 30.0);
+    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
+        firstEndPoint.dx, firstEndPoint.dy);
+
+    var secondControlPoint =
+        Offset(size.width - (size.width / 3.25), size.height - 65);
+    var secondEndPoint = Offset(size.width, size.height - 40);
+    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
+        secondEndPoint.dx, secondEndPoint.dy);
+
+    path.lineTo(size.width, size.height - 40);
+    path.lineTo(size.width, 0.0);
+    path.close();
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
+}

lib/material/animation/WavyHeaderImage.dart

@@ -14,6 +14,19 @@ class CustomPainterDemo extends StatelessWidget {
           size: Size.square(200),
         ),
       ),
+//      body: DecoratedBox(
+//        decoration: BoxDecoration(
+//          gradient: RadialGradient(
+//            center: const Alignment(-0.5, -0.6),
+//            radius: 0.15,
+//            colors: <Color>[
+//              const Color(0xFFEEEEEE),
+//              const Color(0xFF111133),
+//            ],
+//            stops: <double>[0.9, 1.0],
+//          ),
+//        ),
+//      ),
     );
   }
 }