Flutter: Borders Disappear When Their Colour Changes - flutter

Problem:
I have encountered an interesting problem that I cannot solve. The borders of the container disappear when I change their colour.
Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff31353B),
body: Home(),
),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
//style: BorderStyle.solid,
width: 3.0,
),
top: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
right: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
bottom: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
),
color: Colors.green,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
),
],
),
),
),
),
],
),
);
}
}
I have labelled the areas of interest with //TODO:
I cannot even change their colours to white or black without them disappearing. I have spent about an hour trying to resolve this issue on my own with internet searches, with no luck.
Question:
Why can I have one colour but not another?
Expectation:
To change the top and left borders to black and the bottom and right to white.

In flutter "A borderRadius can only be given for uniform borders." so if you remove radius it will work. But if you want to keep radius it is not easy to do with just one line, there is some samples in this question:

Related

dynamic progress bar in flutter

I want to create a progress bar in flutter which is like this
I get the data of week from backend but I have to create it this way.
and the icon on weeks or survey should be touchable.
thanks in advance.
Still a lot of things to change, but i thing it should be enough for the beginning
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
List<String> points = [
'Survey',
'Week 1',
'Week 2',
'Week 3',
'Week 4',
];
var lineWidth =
MediaQuery.of(context).size.width - 16.0; // screen width - 2 * padding
var space = lineWidth / points.length; //space between dots
var currentSteps = 3; // <---- change this one
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: SizedBox(
height: 60.0,
child: Stack(
children: [
//grey line
Positioned(
top: 15,
left: 0,
right: 0,
child: Container(
height: 2.0,
width: double.infinity,
color: Colors.grey,
),
),
//red line
Positioned(
top: 15,
left: 0,
child: Container(
height: 2.0,
width: space * (currentSteps - 1) + space / 2,
color: Colors.orange,
),
),
//circles
Row(
children: points
.asMap()
.map((i, point) => MapEntry(
i,
SizedBox(
width: space,
child: Column(
children: [
Stack(
children: [
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 1.5,
color: i == currentSteps - 1
? Colors.orange
: Colors.transparent,
),
),
child: Center(
child: Container(
height: 20.0,
width: 20.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: i < currentSteps
? Colors.orange
: Colors.grey,
),
),
),
),
if (i < currentSteps - 1)
const SizedBox(
height: 30.0,
width: 30.0,
child: Center(
child: Icon(
Icons.check,
size: 16.0,
color: Colors.white,
),
),
),
],
),
const SizedBox(height: 4.0),
Text(
point,
textAlign: TextAlign.left,
style: TextStyle(
color: i < currentSteps
? Colors.orange
: Colors.grey,
),
),
],
),
),
))
.values
.toList(),
),
],
),
),
),
),
);
}
}
You can try basic Stepper widget with type: StepperType.horizontal. As for the UI you like im_stepper package. If it fails to satisfy you can create custom widget with Stack and Row.
Try basic Stepper widget of flutter. if its not working properly then you need to create custom widget.

How do I make a text element take up half the height of the parent container in flutter?

I have the following code:
containers.add(Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue,
),
margin: const EdgeInsets.all(10),
width: MediaQuery.of(context).size.width/2-20,
height: MediaQuery.of(context).size.width/2-20,
child: Column(
children: [
Text(
value2,
style: TextStyle(
inherit: false,
color: Colors.white,
fontSize: MediaQuery.of(context).size.width/2,
fontWeight: FontWeight.bold,
)
),
]
)
));
});
}
});
The container itself goes into a list which is passed into a GridView eventually becoming a 2-wide grid down the screen. I want to make it so that the text height is half of the height of the container defined by the width and height MediaQuery.of(context).size.width/2-20. Is this possible?
Thanks
You can use Expanded together with FittedBox:
class HalfHeightText extends StatelessWidget {
final String label;
const HalfHeightText({required this.label});
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue,
),
margin: const EdgeInsets.all(10),
width: MediaQuery.of(context).size.width / 2 - 20,
height: MediaQuery.of(context).size.width / 2 - 20,
child: Column(
children: [
// ===========================================
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: Text(
label,
style: const TextStyle(
inherit: false,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
const Expanded(child: SizedBox.shrink()),
// ===========================================
],
),
);
}
}
Result:
HalfHeightText(label: "Text")
use
width: MediaQuery.of(context).size.width0.50,
its mean like user of width 50% or else MediaQuery.of(context).size.width0.25, mean 25%

Flutter - How can I make these Containers to work like a Button?

This is my first App and my first steps in programming. I started with designing the Homepage. Now I want the Containers to act like Buttons, so that I can navigate to other pages. I just can't figure out a way to do so. Maybe u guys got some ideas.
Do i have to delete the 5 Containers and add 5 buttons and redesign them?
I Think there might be a problem since I wrote the buttons as widget?
The Code so far:
//import 'dart:html';
import 'package:apptierpark/Anfahrt.dart';
import 'package:flutter/material.dart';
void main () => runApp(MaterialApp(home: Tierpark()));
class Tierpark extends StatelessWidget {
get assets => null;
get image => null;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: AppBar(
title: Text('Tierpark Marzahne',
style: TextStyle (
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 45,
fontFamily: 'Amatic',
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.white,
offset: Offset(5.0, 5.0),
)
]
)),
flexibleSpace: Image(
image: AssetImage('images/urwald4.jpg'),
fit: BoxFit.fill,
),
backgroundColor: Colors.transparent,
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bamboo.jpg'), fit: BoxFit.fill)),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:
<Widget>[
MenuButton2('Bewohner',),
SizedBox(height: 50),
MenuButton2('Parkplan'),
SizedBox(height: 40),
MenuButton2('Zeiten & Preise'),
SizedBox(height: 40),
MenuButton2('Anfahrt'),
SizedBox(height: 40),
MenuButton2 ('Über Uns')
]
,)
,)
)
);
}
}
//Button Mainpage Neu
class MenuButton2 extends StatelessWidget {
final String title;
const MenuButton2(this.title);
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: const Color(0xFFa9d470),
border: Border.all(
color: const Color(0xFFa9d470)
),
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.9),
spreadRadius: 10,
blurRadius: 12
)
]
),
width: MediaQuery.of(context).size.height*0.38,
height: MediaQuery.of(context).size.height*0.11,
child: Align(
alignment: Alignment.center,
child: Text (title,
style: TextStyle(
fontSize: 50,
fontFamily: 'Amatic',
fontWeight: FontWeight.bold
),))
);
}
}
Wrap the Container with GestureDetector or InkWell like this and call functions with it's properties,
class MenuButton2 extends StatelessWidget {
final String title;
final int buttonId;
const MenuButton2(this.title,this.buttonId);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
if(buttonId == 1){
// do 1
}
else if(buttonId == 2){
// do 2
}
else if(buttonId == 3){
// do 3
}
else if(buttonId == 4){
// do 4
}
else {
// do 5
}
},
child:Container(
decoration: BoxDecoration(
color: const Color(0xFFa9d470),
border: Border.all(
color: const Color(0xFFa9d470)
),
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.9),
spreadRadius: 10,
blurRadius: 12
)
]
),
width: MediaQuery.of(context).size.height*0.38,
height: MediaQuery.of(context).size.height*0.11,
child: Align(
alignment: Alignment.center,
child: Text (title,
style: TextStyle(
fontSize: 50,
fontFamily: 'Amatic',
fontWeight: FontWeight.bold
),
),
),
);
}
And in the place where you call the function do this,
...
<Widget>[
MenuButton2('Bewohner', 1),
SizedBox(height: 50),
MenuButton2('Parkplan', 2),
SizedBox(height: 40),
MenuButton2('Zeiten & Preise', 3),
SizedBox(height: 40),
MenuButton2('Anfahrt', 4),
SizedBox(height: 40),
MenuButton2 ('Über Uns', 5)
],
...
Add your Container inside Inkwell or GestureDetector Widgtes refer below code hope its help to you.
Inkwell Widget
GestureDetector Widgets
// GestureDetector( you use GestureDetector also here instead of InkWell Widgets
InkWell(
onTap: () {
print('button Pressed');
// Call your onPressed or onTap function here
},
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(30),
),
),
height: 50,
width: 200,
child: Text(
'Search',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
Your result screen ->

SingleChildScrollView still causes the screen to overflow

I have a simple screen built using the code shown below. I want to keep the ad banner at the top at all times while the Container() below it to be scrollable. This is the reason I put SingleChildScrollView() in the lower container.
But it still overflows the screen with the following error:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 162 pixels on the bottom.
This is what the screen looks like:
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
// colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
image: AssetImage("assets/feathers_bg.jpg"),
fit: BoxFit.cover,
),
),
child: Column(
children: [
AdmobBanner(
//below is test id
adUnitId: 'ca-app-pub-3940256099942544/6300978111',
adSize: AdmobBannerSize.FULL_BANNER,
),
Padding(
padding: const EdgeInsets.all(40.0),
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
padding: EdgeInsets.all(10),
child: Column(
children: [
Image.network(_birdDetails.thumbnail.source),
SizedBox(height: 10,),
Container(
child: Column(
children: [
Text(
_birdName,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.teal,
fontWeight: FontWeight.bold,
),
),
Text(
_birdDetails.description,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
],
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Text(
_birdDetails.extract,
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 16
),
),
),
SizedBox(height: 10,),
],
),
),
),
),
],
),
),
TL;DR version. Your SingleChildScrollView needs to be Expanded (you can put Expanded -> Padding - > SingleChildScrollView).
Longer version you can read in the official documentation, this section describes a similar scenario:
One common reason for this to happen is that the Column has been
placed in another Column (without using Expanded or Flexible around
the inner nested Column). When a Column lays out its non-flex children
(those that have neither Expanded or Flexible around them), it gives
them unbounded constraints so that they can determine their own
dimensions (passing unbounded constraints usually signals to the child
that it should shrink-wrap its contents). The solution in this case is
typically to just wrap the inner column in an Expanded to indicate
that it should take the remaining space of the outer column, rather
than being allowed to take any amount of room it desires.
And here is a bit simplified version of your code that is easily reproducible (to paste and run for example in dartpad):
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'SO Question : 64200763'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
StringBuffer birdDetails;
var rng = new Random();
#override
initState(){
super.initState();
birdDetails = new StringBuffer();
for(int i=0; i<4000; i++){
birdDetails.write(String.fromCharCode(rng.nextInt(25) + 97));
if(rng.nextBool() && rng.nextBool()) birdDetails.write(' ');
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
decoration: BoxDecoration(
color: Colors.green[400],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Column(
children: [
Container(
height: 100,
width: double.maxFinite,
color: Colors.yellow,
child: Text('Ad placeholder', textAlign: TextAlign.center)
),
Expanded(
child: Padding( // Here is your fix, place expanded above the SingleChildScrollView
padding: const EdgeInsets.all(40.0),
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
padding: EdgeInsets.all(10),
child: Column(
children: [
Image.network('https://picsum.photos/id/1024/512/288'),
SizedBox(height: 10,),
Container(
child: Column(
children: [
Text(
'Bird name',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.teal,
fontWeight: FontWeight.bold,
),
),
Text(
'Bird (random) description',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
],
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Text(
birdDetails.toString(),
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 16
),
),
),
SizedBox(height: 10,),
],
),
),
),
),
),
],
),
),
);
}
}
End result (as per how you organized the widgets, but without overflows):
PS, before posting a question I highly recommend stripping / replacing the code of all dependencies that some users might or might not have at hand (like AdMob), unnecessary assets (like AssetImage) and lastly class structures that aren't defined in the question (like birdDetails.thumbnail.source). It might help you debug the problem on your own and if it doesn't it makes it easier for people that are trying to help you ;).

How to remove space between two containers in Flutter?

I have two Containers of height 250 inside Column widget. There is no any other widget present between this two Container widget but still I can see very little space between two containers.
Here's my code...
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Example(),
);
}
}
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
double height = 250;
TextStyle containerTextStyle = TextStyle(color: Colors.white, fontSize: 24);
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: height,
color: Colors.black,
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
height: height,
color: Colors.black,
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
],
),
);
}
}
I don't know why but if I set the height of this containers to 100 or 400 it is not showing any space between container. Did not try with many different values for height but space is visible for some value and not visible for other value.
Here's the screenshot from my phone...
Both Containers height is equal to 250
Both Containers height is equal to 400
Replace your scaffold with this:
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: height,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.black),
color: Colors.black,
),
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
height: height,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.black),
color: Colors.black,
),
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
],
),
);
As #sukhi said,
You need to use the BoxDecoration in your Container.
But Rather than giving border Color you can simple set width of border to 0.
Like Below:
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(width: 0),
),
height: height,
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(width: 0),
),
height: height,
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
And Do not forget to give your color inside BoxDecoration instead of Container itself else it will throw an error.
Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".
A bit late, but currently seems to be an open Flutter issue. My solution was similar to other answers, but as the color in my case had opacity, I had to wrap the problematic container with another container, and add the decoration to the parent container:
decoration: BoxDecoration(
color: Colors.black, //the color of the main container
border: Border.all(
//apply border to only that side where the line is appearing i.e. top | bottom | right | left.
width: 2.0, //depends on the width of the unintended line
color: Colors.black,
),
),
As suggested from https://github.com/flutter/flutter/issues/14288#issuecomment-668795963