GridView.count: ListTiles are not disappearing above my List - flutter

I'm using the GridView.count widget which works alright. But when I'm scrolling down you can see the tiles going behind my other stuff above my GridView part. You can see it through the little Spaces. I want them to disappear when they go above their starting point.
Also please give me any advice on other parts of my code (3 weeks into Flutter).
enter image description here
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(backgroundColor: Colors.blueGrey[700],
appBar: AppBar(
backgroundColor: Colors.green[200],
foregroundColor: Colors.black,
centerTitle: true,
title: const Text("Stromberg Soundboard"),
),
body: ListView(
children: [
Container(
margin: EdgeInsets.all(3),
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: const DecorationImage(
image: AssetImage('assets/bernd.jpeg'), fit: BoxFit.cover),
),
),
const SeasonsAndJokes(),
],
),
),
);
}
}
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 30,
width: double.infinity,
margin: const EdgeInsets.only(left: 5, right: 5, bottom: 5),
color: Colors.green[100],
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
padding: const EdgeInsets.all(0),
alignment: Alignment.topLeft,
iconSize: 32,
disabledColor: Colors.white,
onPressed: lastSeason,
icon: const Icon(Icons.arrow_left_sharp),
),
Text(
seasonsText[indexische],
style: const TextStyle(fontWeight: FontWeight.bold),
textScaleFactor: 1.3,
),
IconButton(
padding: const EdgeInsets.all(0),
alignment: Alignment.topRight,
iconSize: 32,
onPressed: nextSeason,
icon: const Icon(Icons.arrow_right_sharp),
)
],
),
),
SizedBox(
height: 380,
child: GridView.count(
padding: const EdgeInsets.only(right: 5, left: 5),
crossAxisSpacing: 5,
mainAxisSpacing: 5,
crossAxisCount: 2,
childAspectRatio: 3,
children: [
for (int i = 0; i < titelSeasonOne.length; i++)
ListTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: const BorderSide(color: Colors.white38),
),
trailing: const Icon(
Icons.volume_up_sharp,
color: Colors.blueGrey,
),
tileColor: Colors.green[200],
textColor: Colors.black87,
title: Text(
titelSeasonOne[i],
textScaleFactor: 1,
),
onTap: () {
final player = AudioCache();
player.play(audioSeasonOne[i]);
},
),
],
),
)
],
);
}
}

Related

Strange Top Padding on my second AppBar Flutter

Screen of the strange top padding of my app
I have made two classes : the first has a first AppBar and calls the second one that has also a sticky AppBar and display a list of scrollable Items. However, I have a strange top padding in the second AppBar. I have tried a lot of stuff but nothing seems to work.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
extendBodyBehindAppBar: true,
bottomNavigationBar: BottomNavBar(0, _currentAccount),
appBar: PreferredSize(
preferredSize:
Size.fromHeight(MediaQuery.of(context).size.height / 7),
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: <Color>[
Color(0xFF894c56),
Color(0xFFa80d0d)
])),
child: Padding(
padding: const EdgeInsets.only(bottom: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(top: 50, left: 5),
child: Text(
'Votre évenement ',
style: TextStyle(
fontSize: 15, color: Colors.grey),
)),
Padding(
padding: const EdgeInsets.only(top: 5, left: 5),
child: Text(
event,
style: const TextStyle(
color: Colors.white, fontSize: 17),
),
)
])),
)
],
),
),
body: ListPrestat('Traiteur', _currentAccount)
// ListPrestat('Traiteur', _currentAccount)
));
}
This is the code of my first class that calls the ListPrestat class here under :
#override
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height ,
// -(MediaQuery.of(context).size.height / 6 + 56),
child: CustomScrollView(
slivers: [
SliverAppBar(
toolbarHeight: 50,
expandedHeight: 0,
backgroundColor: const Color(0xFFDCDCDC),
pinned: true,
leading: IconButton(
icon: const Icon(
Icons.arrow_back,
color: Color(0xFFDC3535),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MainScreen(_currentAccount)),
);
},
),
centerTitle: true,
shadowColor: Colors.black,
elevation: 10,
bottom: const PreferredSize(
preferredSize: Size.fromHeight(0),
child: TagList(ListCat: 'brouette')),
title: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(MediaQuery.of(context).size.width / 4),
child: Text(
_currentCat,
style: const TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.w700,
),
)),
),
SliverFixedExtentList(
itemExtent: 110.0,
delegate: SliverChildListDelegate(
[
for (int index = 0; index < 5; index++)
CustomListItem2(
thumbnail: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: AspectRatio(
child: Image.network(
growableList[index],
width: 100.0,
height: 100.0,
fit: BoxFit.fill,
),
aspectRatio: 1 / 1,
)),
title: 'Chez Luigi',
subtitle: 'Les meilleurs pizza hors d\'italie.',
ListCat: 'Food Truck',
),
],
),
)
],
),
);
}
Do you have any idea what can have caused this padding and how to resolve this problem ?
wrap your secound class with scaffold
Scaffold(
body: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height ,),
...................
)

How can I have an animated SliverAppBar like this?

I want these animation between to be smooth, I tried using AnimatedSize, AnimatedOpacity and AnimatedPositioned but there were few errors. And I don't know how to use these with SliverAppBar. In other examples I saw people using LayoutBuilder but they didn't share the full code so I couldn't test it. I will share my code snippet but it has a really odd transition between the two states.
I want CircleAvatar to become smaller and change position
I want Icon(Icons.arrow_back) and Text('Previous Page') to disappear.
I also want my name and job to disappear.
I want that three Containers to become smaller and change position.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dialog Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
elevation: 0,
pinned: true,
expandedHeight: 190,
collapsedHeight: kToolbarHeight + 8,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.none,
centerTitle: true,
titlePadding: EdgeInsetsDirectional.only(
start: 20.0,
end: 20.0,
top: 12.0,
bottom: 12.0,
),
title: SafeArea(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CircleAvatar(
radius: 16,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.all(8.0),
child: Icon(Icons.person),
),
SizedBox(
width: 8,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.all(8.0),
child: Icon(Icons.menu),
),
SizedBox(
width: 8,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.all(8.0),
child: Icon(Icons.message),
),
],
),
],
),
],
),
),
background: SafeArea(
child: Column(
children: [
Container(
alignment: Alignment.topLeft,
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Text(
'PREVIOUS PAGE',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20,
top: 12,
bottom: 24,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 20,
),
SizedBox(
width: 12,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Sertan Hakkı İmamoğlu',
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
'Student',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
SizedBox(
height: 12,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(
horizontal: 34,
vertical: 12,
),
child: Icon(Icons.menu),
),
SizedBox(
width: 4,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(
horizontal: 34,
vertical: 12,
),
child: Icon(Icons.person),
),
SizedBox(
width: 4,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(
horizontal: 34,
vertical: 12,
),
child: Icon(Icons.message),
),
],
)
],
)
],
),
),
],
),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: index.isOdd ? Colors.white : Colors.black12,
height: 100.0,
child: Center(
child: Text('$index', textScaleFactor: 5),
),
);
},
childCount: 20,
),
),
],
),
),
);
}
}
Here's my take on your issue, as suggested by pskink I've used a SliverPersistentHeader and tried to make it responsive so when the size is reducing it has a bit of an animation.
Sample Code
class CustomPageHeader extends SliverPersistentHeaderDelegate {
CustomPageHeader({
required double collapsedHeight,
required double expandedHeight,
}) : minExtent = collapsedHeight, maxExtent = expandedHeight;
#override
final double minExtent;
#override
final double maxExtent;
Widget _buildBtn(IconData icon, double scale) {
double horizontal = 34.0 * scale;
horizontal = horizontal < 8 ? 8.0 : horizontal;
double vertical = 12.0 * scale;
vertical = vertical < 8 ? 8.0 : vertical;
return Container(
decoration: const BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(horizontal: horizontal, vertical: vertical),
child: Icon(icon),
);
}
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final theme = Theme.of(context);
final backgroundColor =
theme.appBarTheme.backgroundColor ?? theme.colorScheme.primary;
final scale = 1 - shrinkOffset / maxExtent;
final isReduced = shrinkOffset >= maxExtent * 0.12;
final wrappedBtns = Wrap(
spacing: 8,
children: [
_buildBtn(Icons.menu, scale),
_buildBtn(Icons.person, scale),
_buildBtn(Icons.message, scale),
],
);
double avatarRadius = 20.0 * scale;
avatarRadius = avatarRadius > 16 ? avatarRadius : 16.0;
return Container(
padding: const EdgeInsets.only(
left: 20,
top: 12,
bottom: 12,
),
color: backgroundColor,
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(radius: avatarRadius),
!isReduced
? const SizedBox(width: 12)
: Expanded(child: Container()),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (!isReduced)
Text(
'Sertan Hakkı İmamoğlu',
style: TextStyle(
fontSize: 18 * scale,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
if (!isReduced)
Text(
'Student',
style: TextStyle(
fontSize: 14 * scale,
color: Colors.grey,
),
),
],
),
if (isReduced) wrappedBtns,
],
),
Flexible(
child: Container(
constraints: const BoxConstraints(maxHeight: 12),
),
),
if (!isReduced) wrappedBtns,
],
),
);
}
#override
bool shouldRebuild(_) => true;
}
Use it in your sliver list like this:
SliverPersistentHeader(
pinned: true,
delegate: CustomPageHeader(
collapsedHeight: kToolbarHeight + 8,
expandedHeight: 190,
),
),
Try the full test code on DartPad
The code is perfectible but should help you enough so you can improve it and continue by yourself.

Flutter - Align widget all the way to the end of a card view. (View image included)

how can I get the flat button to fill the area under the divider all the way to the end of the card, it appears to not be able to go any further down.
See the white space under the FlatButton? I want it to look like the FlatButton is the end.
Doesn't have to be a flat button, any widget with onTap/press/(or a something hack-ish with gesture detector) listener would be fine.
Dart code is ->
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 24, bottom: 16),
child: Text(_label, style: TextStyle(fontSize: 24, color: Color.fromARGB(190, 0, 0, 0), fontWeight: FontWeight.bold)),
),
Divider(color: Colors.black26, height: 2,),
Padding(
padding: const EdgeInsets.all(24.0),
child: Text(_information, style: TextStyle(fontSize: 20, color: Colors.black87)),
),
Divider(color: Colors.black26, height: 2,),
SizedBox(width: double.infinity, child: FlatButton(onPressed: () => _onTap(), color: Color.fromARGB(50, 100, 100, 100), child: Text('Done', style: TextStyle()), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5))))
],
),
),
),
);
}
Please see the code below, I'm using InkWell & Container :
import 'package:flutter/material.dart';
final Color darkBlue = const 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: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
String _label = "";
String _information = "";
return Padding(
padding: const EdgeInsets.all(4.0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 24, bottom: 16),
child: Text(_label,
style: TextStyle(
fontSize: 24,
color: Color.fromARGB(190, 0, 0, 0),
fontWeight: FontWeight.bold)),
),
Divider(
color: Colors.black26,
height: 2,
),
Padding(
padding: const EdgeInsets.all(24.0),
child: Text(_information,
style: TextStyle(fontSize: 20, color: Colors.black87)),
),
Divider(
color: Colors.black26,
height: 2,
),
Spacer(),
InkWell(
onTap: () {}, //_onTap(),
child: Container(
width: double.infinity,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: const Color.fromARGB(50, 100, 100, 100)),
child: const Center(child: Text('Done', style: TextStyle())),
),
)
],
),
),
),
);
}
}
I solved my code like this, setting a height factor it did what i wanted automatically.
SizedBox(width: double.infinity, height: 60, child:
FlatButton(onPressed: () => _onTap(), color: Colors.transparent, child:
Text('Done', style: TextStyle()), shape: RoundedRectangleBorder(borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(15), bottomRight: Radius.circular(15)))))
Only downside is that you have to specify a height rather than letting the widget adjust that based on content. Although there is probably a workaround for that.

Add Badge on a hamburger menu icon in flutter

Hi Please help I am trying to add a red Badge on a hamburger menu icon in the flutter app like below
You can achieve this with badges plugin here
Add this to your package's pubspec.yaml file under dependencies:
badges: ^2.0.2
then import,
import 'package:badges/badges.dart';
finally add Badge in AppBar,
AppBar(
leading: Badge(
position: BadgePosition.topEnd(top: 10, end: 10),
badgeContent: null,
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
),
title: Text('Badge Demo', style: TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
)
Using Stack, similar sample code:
class NotificationIcon extends StatelessWidget {
final bool active;
final double marginTopLeft;
const NotificationIcon({Key key, this.active = true, this.marginTopLeft})
: super(key: key);
#override
Widget build(BuildContext context) {
final color = active ? Colors.white : const Color(0xff40a9ff);
final margin = marginTopLeft ?? 17;
return Container(
width: 24,
height: 24,
child: Stack(
children: [
Center(
child: Icon(
Icons.notifications,
color: color,
),
),
Positioned(
right: margin,
top: margin,
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
width: 5,
height: 5,
),
),
),
)
],
),
);
}
}
It can be easily done using the Stack widget. I have given an example of how you can use stack to achieve that. Note that you have to use Scaffold.of(yourContext).openDrawer() to open the attached drawer (as I've done here) since the hamburger icon is manually placed there.
import 'package:flutter/material.dart';
void main() {
runApp(Example());
}
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Example",
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: InkWell(
splashColor: Colors.lightBlue,
onTap: () => Scaffold.of(context).openDrawer(),
child: Center(
child: Container(
margin: EdgeInsets.only(left: 10),
width: 40,
height: 25,
child: Stack(
children: [
Icon(
Icons.menu,
color: Colors.grey[850],
),
Positioned(
left: 25,
top: 0,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 10,
height: 10,
),
),
),
)
],
),
),
),
),
title: Text("Hello"),
actions: [
],
),
body: Center(child: Text("Welcome")),
),
);
}
}
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
return Scaffold(
key: _scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.red,
title: Text(
"Some Text",
style: TextStyle(color: Colors.white),
),
leading: InkWell(
splashColor: Colors.lightBlue,
onTap: () {
_scaffoldKey.currentState.openDrawer();
},
child: Center(
child: Container(
margin: EdgeInsets.only(left: 10),
width: 40,
height: 25,
child: Stack(
children: [
Icon(
Icons.menu,
color: Colors.white,
),
Positioned(
left: 25,
top: 0,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 10,
height: 10,
),
),
),
)
],
),
),
),
),
),
body: SafeArea(
child: Container(
),
),
);
}
Please use this. And if you want to show the number as well, you can use Badge too.

Custom Button in Flutter

What I am trying to achieve is below:
Should I be using Row with Icon and Text?
Here is my code and its output
RaisedButton(
elevation: 10,
onPressed: () {},
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 55,
color: Colors.deepPurple,
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Text(
'Settings',
style: TextStyle(
fontSize: 25,
),
),
],
),
),
);
OUTPUT:
Any help would be appreciated.
Here you go
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.light(), //.copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
get borderRadius => BorderRadius.circular(8.0);
#override
Widget build(BuildContext context) {
return Center(
child: Material(
elevation: 10,
borderRadius: borderRadius,
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.all(0.0),
height: 60.0,//MediaQuery.of(context).size.width * .08,
width: 220.0,//MediaQuery.of(context).size.width * .3,
decoration: BoxDecoration(
borderRadius: borderRadius,
),
child: Row(
children: <Widget>[
LayoutBuilder(builder: (context, constraints) {
print(constraints);
return Container(
height: constraints.maxHeight,
width: constraints.maxHeight,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: borderRadius,
),
child: Icon(
Icons.settings,
color: Colors.white,
),
);
}),
Expanded(
child: Text(
'Settings',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
),
),
),
],
),
),
),
),
);
}
}
John Joe's answer is correct. Here is another solution that does the same with plain Container widget. I am posting it here just in case someone interested.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: MyWidget(),
),
],
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
height: 48.0,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
spreadRadius: 2.0)
]),
child: Stack(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: Align(
alignment: Alignment.center,
child: Icon(Icons.settings))),
Expanded(
child: Center(
child: Text("Hellow world",
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.black)),
)),
],
),
SizedBox.expand(
child: Material(
type: MaterialType.transparency,
child: InkWell(onTap: () {}),
),
),
],
),
),
);
}
}
See the live demo here.
You can use Column and Row.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
_firstWidget(),
SizedBox(height: 15),
_secondWidget(),
],
)),
);
}
Widget _firstWidget() {
return InkWell(
onTap: () {},
child: Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 55,
width: 30,
decoration: myBoxDecoration(),
child: Icon(
Icons.settings,
color: Colors.white,
),
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Programs & Services',
style: TextStyle(
fontSize: 25,
),
))),
],
),
));
}
Widget _secondWidget() {
return InkWell(
onTap: () {},
child: Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
decoration: myBoxDecoration(),
height: 55,
width: 30,
child: Icon(
Icons.settings,
color: Colors.white,
),
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Settings',
style: TextStyle(
fontSize: 25,
),
))),
],
),
));
}
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
Output
Darish's answer seems to me the best, since the splash is displayed on top of everything and makes a very good visual effect.
Even so, since the answer is from so long ago, I wanted to put here the updated code to NullSafety and also correct some bugs and remove unnecessary things.
For the rest it is perfect.
Here my code:
class MyWidget extends StatelessWidget {
const MyWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: const [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
spreadRadius: 2.0,
)
],
),
child: SizedBox(
height: 48,
child: Stack(
children: [
Row(
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Icon(Icons.settings, color: Colors.white),
),
),
const Expanded(
child: Center(
child: Text("Hellow world"),
),
),
],
),
Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(8.0),
),
),
],
),
),
);
}
}