UI Implementation of this design https://dribbble.com/shots/3812962-iPhone-X-Todo-Concept

PageView Implementation

class Task {
  final IconData icon;
  final int tasks;
  final String title;
  final double percentage;

  Task(this.icon, this.tasks, this.title, this.percentage);
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Task> tasks = [
    Task(Icons.supervised_user_circle, 9, "Personal", 0.3),
    Task(Icons.business_center, 12, "Workout", 0.7),
    Task(Icons.home, 3, "Home", 0.1),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFFF39927), Color(0xFFEE6840)],
            ),
          ),
          child: SafeArea(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 30, left: 30, right: 30),
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.menu,
                        color: Colors.white,
                      ),
                      Expanded(
                        child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            "TODO",
                            style: TextStyle(color: Colors.white, fontSize: 16),
                          ),
                        ),
                      ),
                      Icon(
                        Icons.search,
                        color: Colors.white,
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 60, left: 50),
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          height: 70,
                          width: 70,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Jane_Fonda_Cannes_2015.jpg/220px-Jane_Fonda_Cannes_2015.jpg",
                              ),
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Color(0x50000000),
                                blurRadius: 20,
                                spreadRadius: 5,
                                offset: Offset(0, 10),
                              )
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 30),
                          child: Text(
                            "Hello, Jane",
                            style: TextStyle(color: Colors.white, fontSize: 30),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 20),
                          child: Text(
                            "Looks like feel good.",
                            style: TextStyle(
                              color: Color(0xCCFFFFFF),
                              fontSize: 15,
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 5),
                          child: Text(
                            "You have 3 taks to do today.",
                            style: TextStyle(
                              color: Color(0xCCFFFFFF),
                              fontSize: 15,
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 40),
                          child: Text(
                            "TODAY: JUNE 25, 2019",
                            style: TextStyle(color: Color(0xCCFFFFFF), fontSize: 15, fontWeight: FontWeight.w500),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: PageView.builder(
                    itemCount: tasks.length,
                    controller: PageController(initialPage: 0, viewportFraction: 0.8),
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                        child: Container(
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Color(0x40000000),
                                blurRadius: 10,
                                offset: Offset(0, 12),
                              )
                            ],
                          ),
                          child: Card(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            color: Colors.white,
                            child: Padding(
                              padding: const EdgeInsets.all(15),
                              child: Column(
                                children: <Widget>[
                                  IntrinsicHeight(
                                    child: Row(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Icon(tasks[index].icon),
                                        Expanded(
                                          child: Container(
                                            child: Align(
                                              alignment: Alignment.topRight,
                                              child: Icon(Icons.menu),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Container(
                                      width: double.infinity,
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        mainAxisAlignment: MainAxisAlignment.end,
                                        children: <Widget>[
                                          Text(
                                            "${tasks[index].tasks} tasks",
                                            style: TextStyle(
                                              color: Color(0xD0000000),
                                              fontSize: 15,
                                            ),
                                          ),
                                          SizedBox(
                                            height: 10,
                                          ),
                                          Text(
                                            "${tasks[index].title}",
                                            style: TextStyle(
                                              color: Color(0xD0000000),
                                              fontSize: 24,
                                            ),
                                          ),
                                          SizedBox(
                                            height: 10,
                                          ),
                                          LinearProgressIndicator(
                                            value: tasks[index].percentage,
                                            backgroundColor: Color(0x300000FF),
                                          )
                                        ],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}