lohanidamodar / flutter_ui_challenges

Updated for Flutter 3.x ** 100+ Professional UI implementations with Code in Flutter. Available in Android, iOS, Linux and Web
MIT License
4.6k stars 1.41k forks source link

Hi there! Nice UI. I was wondering why On tap #40

Closed ridwanray closed 4 years ago

ridwanray commented 4 years ago

Hi there! Nice UI. I was wondering why Ontap() method could not be implemented in the custom drawer.

Attached here is the side navigation drawer Normally One should be able should be able to tap on each image list to navigate to another page

`/**

import 'package:flutter/material.dart'; import 'package:flutter_ui_challenges/src/pages/animations/animation1/animation1.dart'; import 'package:flutter_ui_challenges/src/utils/oval-right-clipper.dart'; import 'package:cached_network_image/cached_network_image.dart';

class DarkDrawerPage extends StatelessWidget { static final String path = "lib/src/pages/navigation/drawer1.dart"; final GlobalKey _key = GlobalKey(); final Color primary = Color(0xff291747); final Color active = Color(0xff6C48AB);

@override Widget build(BuildContext context) { return Scaffold( key: _key, appBar: AppBar( title: Text('Dark Drawer Navigation'), automaticallyImplyLeading: false, leading: IconButton( icon: Icon(Icons.menu), onPressed: () { _key.currentState.openDrawer(); }, ), ), drawer: _buildDrawer(), body: SingleChildScrollView( padding: const EdgeInsets.all(16.0), child: Column( children: [ Container( width: double.infinity, height: 200, decoration: BoxDecoration( color: Colors.deepOrange, borderRadius: BorderRadius.circular(10.0)), ), SizedBox(height: 10.0), Container( width: double.infinity, height: 200, decoration: BoxDecoration( color: Colors.lightGreen, borderRadius: BorderRadius.circular(10.0)), ), SizedBox(height: 10.0), Container( width: double.infinity, height: 200, decoration: BoxDecoration( color: Colors.pink, borderRadius: BorderRadius.circular(10.0)), ), ], ), ), ); }

_buildDrawer() { final String image = images[0]; return ClipPath( clipper: OvalRightBorderClipper(), child: Drawer( child: Container( padding: const EdgeInsets.only(left: 16.0, right: 40), decoration: BoxDecoration( color: primary, boxShadow: [BoxShadow(color: Colors.black45)]), width: 300, child: SafeArea( child: SingleChildScrollView( child: Column( children: [ Container( alignment: Alignment.centerRight, child: IconButton( icon: Icon( Icons.power_settings_new, color: active, ), onPressed: () {}, ), ), Container( height: 90, alignment: Alignment.center, decoration: BoxDecoration( shape: BoxShape.circle, gradient: LinearGradient( colors: [Colors.pink, Colors.deepPurple])), child: CircleAvatar( radius: 40, backgroundImage: CachedNetworkImageProvider(image), ), ), SizedBox(height: 5.0), Text( "erika costell", style: TextStyle(color: Colors.white, fontSize: 18.0), ), Text( "@erika07", style: TextStyle(color: active, fontSize: 16.0), ), SizedBox(height: 30.0), _buildRow(Icons.home, "Home"), _buildDivider(), _buildRow(Icons.person_pin, "Your profile"), _buildDivider(), _buildRow(Icons.settings, "Settings"), _buildDivider(), _buildRow(Icons.email, "Contact us"), _buildDivider(), _buildRow(Icons.info_outline, "Help"), _buildDivider(), ], ), ), ), ), ), ); }

Divider _buildDivider() { return Divider( color: active, ); }

Widget _buildRow(IconData icon, String title) { final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0); return Container( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Row(children: [ Icon( icon, color: active, ), SizedBox(width: 10.0), Text( title, style: tStyle, ), ]), ); } }

lohanidamodar commented 4 years ago

wrap each list item with InkWell and use onTap there.

ridwanray commented 4 years ago

@lohanidamodar Thanks for your reply. it works out.