flutter页面练习_2

熟能生巧，跟着老外写页面第2篇

完成效果：

image.png

所有代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
          backgroundColor: Colors.white,
          body : HomeScreen()
      ),
    );
  }
}

class CustomShapeClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    final Path path = Path();
    path.lineTo(0.0, size.height);
    var firstEndPoint = Offset(size.width  * 0.5, size.height - 35.0);
    var firstContollerPoint = Offset(size.width * 0.25, size.height -50.0);
    path.quadraticBezierTo(firstContollerPoint.dx, firstContollerPoint.dy, firstEndPoint.dx, firstEndPoint.dy);

    var secondEndPoint = Offset(size.width, size.height - 80.0);
    var secondContollerPoint = Offset(size.width * 0.75, size.height - 10.0);
    path.quadraticBezierTo(secondContollerPoint.dx, secondContollerPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }

}

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        TopPart(),
      ],
    );
  }
}

class TopPart  extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TopPartState();
  }
}

class _TopPartState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    double pageTop = MediaQuery.of(context).padding.top;
    return Stack(
      children: <Widget>[
        ClipPath(
          clipper: CustomShapeClipper(),
          child: Container(
            height: 400.0,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [const Color(0xFFF47D15),const Color(0xFFEF772C)],
              )
            ),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 50.0,
                  child: Padding(
                    padding: EdgeInsets.only(left:20.0, top: pageTop+10.0),
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.face, color:  Colors.white,),
                        SizedBox( width: 16.0,)
                      ],
                    ),
                  ),
                ),
                Expanded(child: Align(
                  child: Text("让container具有特殊形状", style:TextStyle(color:Colors.white,fontSize: 20.0)),
                ))
              ],
            ),
          ),
        )
      ],
    );
  }

}

知识点：
1.定制化Container形状
2.有效内容避开顶部安全区域

补充说明：页面借鉴于https://www.youtube.com/watch?v=SyrmtnYGJyI