Closed ridwanray closed 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, ), ]), ); } }
wrap each list item with InkWell and use onTap there.
@lohanidamodar Thanks for your reply. it works out.
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, ), ]), ); } }