I have tried removing all padding and border and put the icon inside a FittedBox but the are still parts of the Container that are visible. How can I remove them? Thank you in advance.
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Cupertino App',
debugShowCheckedModeBanner: false,
home: CupertinoPageScaffold(
child: Center(
child: CupertinoButton(
minSize: 15,
padding: EdgeInsets.zero,
onPressed: () {},
child: Container(
width: 40,
padding: EdgeInsets.zero,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
border: Border.all(
width: 0,
color: Colors.transparent,
),
),
child: const FittedBox(
fit: BoxFit.cover,
child: Icon(
CupertinoIcons.minus_circle_fill,
color: Colors.amber,
),
),
),
),
),
),
);
}
}
The container colors are visible because the Icon assets comes with default padding, You can check this question: How to get rid of a icon padding,
You can use transparent Color on the Container to hide it.
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent, // here
border: Border.all(
you can size
Icon(
CupertinoIcons.minus_circle_fill,
color: Colors.amber,
size:40
)
and you dont need container border default is none
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
//border: Border.all(
//width: 0,
//color: Colors.transparent,
// ),
),
or here
CupertinoButton(
minSize: 15,
padding: EdgeInsets.zero,
onPressed: () {},
child: Container(
width: 40,
padding: EdgeInsets.zero,
decoration:const BoxDecoration(
shape: BoxShape.circle,
color: Colors.amber,
),
child: const FittedBox(
fit: BoxFit.cover,
child: Icon(
Icons.remove,
color: Colors.blue,
size:40
),
),
),
),
Related
i am new to the flutter, need to create 12 circles around circle with proper angle, pls help to find proper answer with mathematically correct. pls refer the above diagram.
I have just faced the same issue...
Easy workaround:
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.25), // border color
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(2), // border width
child: Container( // or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue, // inner circle color
),
child: Container(), // inner content
),
),
),
You Just Need To Run This Code:
import 'package:flutter/material.dart';
import 'circle_file.dart';
import 'dart:math' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const CircelFile(),
);
}
}
class CircelFile extends StatefulWidget {
const CircelFile({Key? key}) : super(key: key);
#override
State<CircelFile> createState() => _CircelFileState();
}
class _CircelFileState extends State<CircelFile> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Stack(
children: [
Container(
width:300,
height: 300,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
Container(
height:1.0,
width:70,
color:Colors.black,),
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
color: Colors.green, // border color
shape: BoxShape.circle,
),
),
Container(
height:1.0,
width:70,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
],
),
),
Positioned(
left: 136,
top: 18,
child: Column(
children: [
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
Container(
height:70,
width:1,
color:Colors.black,),
],
),
),
Positioned(
left: 136,
bottom:15,
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
],
),
),
Positioned(
left: 197,
bottom:36,
child: Transform.rotate(
angle: -math.pi /4,
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),
),
],
),
),
),
Positioned(
left:70,
top: 160,
child: RotationTransition(
turns: AlwaysStoppedAnimation(-20 / 23),
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),),
],
),
),
),
Positioned(
right: 65,
top: 55,
child: RotationTransition(
turns: AlwaysStoppedAnimation(-20 / 58),
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),),
],
),
),
),
Positioned(
left: 70,
top: 40,
child: RotationTransition(
turns: AlwaysStoppedAnimation(-20 / 32),
child: Column(
children: [
Container(
height:70,
width:1,
color:Colors.black,),
Container(
width: 30,
height:30,
decoration: BoxDecoration(
color: Colors.red, // border color
shape: BoxShape.circle,
),),
],
),
),
),[enter link description here][1]
],
),
),
);
}
}
I want to add a ripple effect to a custom Container. I have used Inkwell and Material widgets to achieve this behavior, but it does not work. The code is as follows:
#override
Widget build(BuildContext context) {
return Center(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.deepPurpleAccent,
),
alignment: Alignment.center,
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
The result is:
I also used a transparent color on Container and the purple color on Material as follows:
#override
Widget build(BuildContext context) {
return Center(
child: Material(
color: Colors.deepPurpleAccent,
child: InkWell(
onTap: () {},
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.transparent,
),
alignment: Alignment.center,
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
As a result, the ripple effect occurs, but the Container looks like this (not what I want):
I also swapped the Container and Material widgets with each other, applied clip on the Container as follows:
#override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.transparent,
),
clipBehavior: Clip.hardEdge,
child: Material(
color: Colors.deepPurpleAccent,
child: InkWell(
onTap: () {},
child: Center(
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
Again, the ripple effect occurs, but the Container does not look as I want to (you can spot the little difference between the following photo and the first photo, in the edges of the Container):
I want the Container to look exactly as in the first photo with a ripple effect.
Note: The behavior that I want, can be exactly achieved through using Ink and Inkwell widgets, but when used in a ListView, it causes item render problems.
You were very close. You needed to have borderRadius on Material and InkWell. Try it this way
child: Material(
color: Colors.deepPurpleAccent,
borderRadius: BorderRadius.circular(18),
child: InkWell(
borderRadius: BorderRadius.circular(18),
onTap: () {},
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.transparent,
),
alignment: Alignment.center,
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
I just want to overlap 2 Container by respecting first Container's width.
This is what I want to achieve.
Containers not occupying space When I use Stack Widget. So I think stack widget not working for me.
And It is not overlapping when I use Row. So Row is not working either.
In CSS I just give negative margin to the right element and it is done. But I couldn't figure out the way to achieve that in flutter.
I put these Containers in to the Stack. Because I have to overflow a Card widget with that Containers
Try below code hope its help to you
You can use Stack Widget for that
Container(
height: 60,
margin: EdgeInsets.symmetric(
horizontal: 4),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.only(
topRight: Radius.circular(6),
bottomRight: Radius.circular(6),
),
),
margin: EdgeInsets.symmetric(vertical: 4),
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.centerRight,
child: Text('Ends after 1 Hour'),
),
),
Positioned(
top: 0,
bottom: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(
topRight: Radius.circular(6),
bottomRight: Radius.circular(6),
),
),
alignment: Alignment.center,
padding: EdgeInsets.only(right: 8, left: 20),
child: Text('40% Discount'),
),
),
],
),
),
Your result screen ->
Here is my trial.
Using Stack and set 'clipBehavior: Clip.none' parameter.
Added 'addPostFrameCallback' method to get a left container's width.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double firstContainerWidth = 0;
GlobalKey firstContainerKey = GlobalKey();
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
firstContainerWidth = firstContainerKey.currentContext.size.width;
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.bottomStart,
children: <Widget>[
Positioned(
left: firstContainerWidth - 10,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 5),
decoration: BoxDecoration(
color: Colors.orange[400],
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
child: Text(
'Ends after 1 hour',
style: TextStyle(
fontSize: 15,
color: Colors.white,
),
),
),
),
Container(
key: firstContainerKey,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
child: Text(
'%40 Discount',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
]);
}
}
It can be done in multiple ways. You can use CustomPainter, Stack or even Row to do this. Here is my approach using a Row only.
Result
Code : DartPad
class DiscountBadgeWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_buildRedSection(),
_buildMiddleSection(),
_buildYellowSection(),
],
);
}
Widget _buildMiddleSection() => Container(
color: Colors.yellow,
child: Align(
alignment: Alignment.bottomCenter,
heightFactor: .5,
child: Container(
height: 80,
width: 10,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.horizontal(right: Radius.circular(10)),
),
),
),
);
Widget _buildRedSection() => Container(
height: 80,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.horizontal(left: Radius.circular(10)),
),
padding: const EdgeInsets.only(left: 16, right:6),
alignment: Alignment.centerRight,
child: Text('40% Discount'),
);
Widget _buildYellowSection() => Container(
height: 60,
decoration: const BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.horizontal(right: Radius.circular(10)),
),
padding: const EdgeInsets.only(right: 16, left:6),
alignment: Alignment.centerRight,
child: Text('Ends after 1 Hour'),
);
}
I know the code is a little messy, still learning.
I have placed the Image outside of the BoxDecoration but noting is showing up. Nothing shows up in the RUN as an error. I am guessing that it has something to do with the container inside the ListView but haven't been able to find out why its blank.
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0.0,
title: Text("App"),
),
body: SafeArea(
child: Container(
height: 80,
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.only(
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0))
),
child: ListView(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
width: 120,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[300],
offset: Offset(1, 1),
blurRadius: 0
),
], // BoxShadow
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ListTile(
leading: Icon(Icons.search, color: Colors.red),
title: TextField(
decoration: InputDecoration(
hintText: "What stuff do you want to seach for?",
hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
border: InputBorder.none
),
),
trailing: Icon(Icons.filter_list, color: Colors.red),
),
),
SizedBox(height: 5),
Container(
height: 220,
width: 220,
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(1, 1),
blurRadius: 4
),
],
),
child: Image.asset("assets/images/1.jpg"),
),
],
),
),
],
),
),
)
);
}
}
This is what I am trying to do.
I updated the structure as a Column with two children:
The blue Container with the TextField
The ListView with the pictures
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: Home(),
),
);
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(elevation: 0.0, title: Text("App")),
body: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.all(20.0),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
),
),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
),
child: const ListTile(
leading: Icon(Icons.search),
title: TextField(
decoration: InputDecoration(
hintText: "What stuff do you want to seach for?",
hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
border: InputBorder.none,
),
autofocus: true,
),
trailing: Icon(Icons.filter_list),
),
),
),
SizedBox(
height: 120.0,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
20,
(index) => Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset("assets/images/cartoon.jpg"),
),
),
),
),
],
),
),
);
}
}
what is the easy way to change border color on focus?
on focus, I want
in border: Border.all(width: 2, color: Colors.white)),
child: Icon(...
to be
Colors.yellow
MaterialButton(
padding: EdgeInsets.all(4.0),
focusColor: Colors.indigo,
elevation: 0.0,
//focusNode: myFocusNode,
child: Container(
child: new Align(
alignment: Alignment.bottomRight,
child: Container(
margin: EdgeInsets.all(20),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(width: 2, color: Colors.white)),
child: Icon(
Icons.search,
color: Colors.white,
),
)),
),
onPressed: () async {},
)
You can follow the below code.
import 'package:flutter/material.dart';
bool focus = false;
class teset extends StatefulWidget {
#override
State<StatefulWidget> createState() => teset_RunAppPageState();
}
class teset_RunAppPageState extends State<teset> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: MaterialButton(
padding: EdgeInsets.all(4.0),
focusColor: Colors.indigo,
elevation: 0.0,
//focusNode: myFocusNode,
child: Container(
child: new Align(
alignment: Alignment.bottomRight,
child: Container(
margin: EdgeInsets.all(20),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
width: 2, color: focus ? Colors.white : Colors.yellow)),
child: Icon(
Icons.search,
color: Colors.white,
),
)),
),
onPressed: () async {
setState(() {
focus = !focus;
});
},
),
);
}
}