Flutter Instagram Desktop (rev 6)

main.dart

import 'package:flutter/material.dart';

final color1 = Color(0xFF282A34);
final color2 = Color(0XFF3C3F51);
final color3 = Color(0xFFE2336B);
final color4 = Color(0xFFFCAC46);
final fontFamilyAvenir = 'Avenir';
final fontFamilyBillabong = 'Billabong';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          WidgetNavigationDrawer(),
          WidgetContent(),
        ],
      ),
    );
  }
}

class WidgetNavigationDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: color1,
      width: 300,
      height: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildWidgetInstagramLogo(),
          SizedBox(height: 24),
          _buildWidgetPhotoProfile(),
          SizedBox(height: 16),
          Center(
            child: Text(
              'Hello Ditta',
              style: Theme.of(context).textTheme.headline6.copyWith(
                color: Colors.white,
                fontFamily: fontFamilyAvenir,
              ),
            ),
          ),
          Center(
            child: Text(
              '@helloditta',
              style: Theme.of(context).textTheme.bodyText2.copyWith(
                fontFamily: fontFamilyAvenir,
                color: Colors.grey,
              ),
            ),
          ),
          SizedBox(height: 16),
          _buildWidgetInfoPostsFollowersFollowing(context),
          SizedBox(height: 24),
          _buildWidgetItemMenu(
            context,
            'Feed',
            Icons.dashboard_outlined,
            isSelected: true,
          ),
          _buildWidgetItemMenu(
            context,
            'Explore',
            Icons.search,
          ),
          _buildWidgetItemMenu(
            context,
            'Notifications',
            Icons.notifications,
            badge: 4,
          ),
          _buildWidgetItemMenu(
            context,
            'Direct',
            Icons.near_me,
            badge: 1,
          ),
          _buildWidgetItemMenu(
            context,
            'IG TV',
            Icons.tv,
          ),
          _buildWidgetItemMenu(
            context,
            'Stats',
            Icons.bar_chart,
          ),
          _buildWidgetItemMenu(
            context,
            'Settings',
            Icons.settings,
          ),
          SizedBox(height: 16),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24.0),
            child: Container(
              width: double.infinity,
              height: 0.5,
              color: Colors.grey,
            ),
          ),
          SizedBox(height: 16),
          _buildWidgetItemMenu(
            context,
            'Logout',
            Icons.logout,
          ),
        ],
      ),
    );
  }

  Widget _buildWidgetItemMenu(
      BuildContext context,
      String label,
      IconData iconData, {
        bool isSelected = false,
        int badge = 0,
      }) {
    return Padding(
      padding: const EdgeInsets.only(
        left: 24.0,
        top: 12.0,
        bottom: 12,
      ),
      child: Row(
        children: [
          isSelected
              ? ShaderMask(
            shaderCallback: (bounds) => LinearGradient(
              begin: Alignment.bottomLeft,
              end: Alignment.topRight,
              colors: [
                color3,
                color4,
              ],
              stops: [
                0.1,
                0.9,
              ],
            ).createShader(bounds),
            child: Icon(
              iconData,
              color: Colors.white,
            ),
          )
              : Icon(
            iconData,
            color: Colors.white60,
          ),
          SizedBox(width: 24),
          Expanded(
            child: Text(
              label,
              style: TextStyle(
                color: isSelected ? Colors.white : Colors.white60,
              ),
            ),
          ),
          badge > 0
              ? Expanded(
            child: Text(
              '$badge',
              style: Theme.of(context).textTheme.caption.copyWith(color: Colors.grey.withOpacity(.5)),
              textAlign: TextAlign.start,
            ),
          )
              : Container(),
          SizedBox(width: 16),
          isSelected
              ? Container(
            width: 2,
            height: 24,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(999),
              color: color3,
            ),
          )
              : Container(),
        ],
      ),
    );
  }

  Widget _buildWidgetInfoPostsFollowersFollowing(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: Column(
            children: [
              Text(
                '702',
                style: Theme.of(context).textTheme.bodyText2.copyWith(
                  color: Colors.white,
                  fontFamily: fontFamilyAvenir,
                ),
              ),
              SizedBox(height: 8),
              Text(
                'Posts',
                style: Theme.of(context).textTheme.caption.copyWith(
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
        Container(
          width: 0.5,
          height: 48,
          color: Colors.grey,
        ),
        Expanded(
          child: Column(
            children: [
              Text(
                '88.8k',
                style: Theme.of(context).textTheme.bodyText2.copyWith(
                  color: Colors.white,
                  fontFamily: fontFamilyAvenir,
                ),
              ),
              SizedBox(height: 8),
              Text(
                'Followers',
                style: Theme.of(context).textTheme.caption.copyWith(
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
        Container(
          width: 0.5,
          height: 48,
          color: Colors.grey,
        ),
        Expanded(
          child: Column(
            children: [
              Text(
                '995',
                style: Theme.of(context).textTheme.bodyText2.copyWith(
                  color: Colors.white,
                  fontFamily: fontFamilyAvenir,
                ),
              ),
              SizedBox(height: 8),
              Text(
                'Following',
                style: Theme.of(context).textTheme.caption.copyWith(
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildWidgetPhotoProfile() {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          gradient: LinearGradient(
            begin: Alignment.bottomLeft,
            end: Alignment.topRight,
            colors: [
              color3,
              color4,
            ],
            stops: [
              0.1,
              0.9,
            ],
          ),
        ),
        padding: EdgeInsets.all(2),
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: color1,
          ),
          padding: EdgeInsets.all(4),
          child: ClipOval(
            child: Image.asset(
              'assets/images/photo_profile.jpg',
              width: 72,
              height: 72,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildWidgetInstagramLogo() {
    return Padding(
      padding: const EdgeInsets.only(
        left: 24,
        top: 24,
      ),
      child: Row(
        children: [
          Image.asset(
            'assets/images/instagram_logo.png',
            width: 32,
          ),
          SizedBox(width: 16),
          Text(
            'Instagram',
            style: TextStyle(
              fontFamily: fontFamilyBillabong,
              color: Colors.white,
              fontSize: 28,
            ),
          ),
        ],
      ),
    );
  }
}

class WidgetContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
    // TODO: buat widget content
  }
}