left_navigation_item_curved.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: PlayingWithClipper(),
      ),
    );
  }
}

class PlayingWithClipper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const separator = const SizedBox(
      height: 10,
    );
    const radius = Radius.circular(30);
    const blue = Color(0xFF4761EE);
    return Scaffold(
      backgroundColor: Colors.white,
      body: Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ConstrainedBox(
              constraints: BoxConstraints(minWidth: 30, maxWidth: 80),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  DecoratedBox(
                    decoration: BoxDecoration(
                      color: blue,
                      borderRadius: BorderRadius.only(
                        topLeft: radius,
                        topRight: radius,
                        bottomRight: radius,
                      ),
                    ),
                    child: Column(children: [
                      const SizedBox(
                        height: 100,
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                    ]),
                  ),
                  Container(
                    color: blue,
                    child: SizedBox(
                      height: 60,
                      child: Stack(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(left: 10),
                            alignment: Alignment.center,
                            padding: EdgeInsets.symmetric(
                              horizontal: separator.height,
                              vertical: separator.height,
                            ),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.horizontal(
                                left: radius,
                              ),
                            ),
                          ),
                          Center(
                            child: CircleAvatar(
                              backgroundColor: blue,
                              child: Text(
                                'N',
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        color: blue,
                        borderRadius: BorderRadius.only(
                          bottomLeft: radius,
                          topRight: radius,
                          bottomRight: radius,
                        ),
                      ),
                      child: Column(
                        children: [
                          separator,
                          CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Text('H'),
                          ),
                          separator,
                          CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Text('F'),
                          ),
                          separator,
                          CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Text('A'),
                          ),
                          separator,
                          CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Icon(Icons.add),
                          ),
                          separator,
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              child: Text('content'),
            ),
          ),
        ],
      ),
    );
  }
}