How Can I resize image widget relatively? - flutter

I want my image resize relatively from parent Containerwidget and defined scale: 0.8,//here in AssetImage() but it doesn't work ? How Can I fix this ?
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 50,
height: 50,
// color: Colors.green,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
image:
DecorationImage(
fit: BoxFit.fill,
image: AssetImage('images/prop/lock.png'),
scale: 0.8,//here
),
),
),
),
],
),
),
Additional comment
I think LayoutBuilder() doesn't work appropriately.
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 50,
height: 50,
// color: Colors.green,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: LayoutBuilder(
builder: (context, constraints) {
return Image.asset(
'images/prop/lock.png',
fit: BoxFit.none,
height: constraints.maxHeight * 0.1,
width: constraints.maxWidth * 0.1,
);
},
),
),
),
],
),
),


You can use LayoutBuilder like this:
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 50,
height: 50,
alignment: Alignment.center,// important part
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: LayoutBuilder(
builder: (context, constraints) {
return Image.asset(
'images/prop/lock.png',
fit: BoxFit.contain,
height: constraints.maxHeight * 0.3,
width: constraints.maxWidth * 0.3,
);
},
),
),
),
],
),
)


You can Use AspectRatio Class for that use, like this
final double size = MediaQuery.of(context).size.aspectRatio;


You must change fit type to BoxFit.none, like this:
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 100,
height: 100,
// color: Colors.green,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.none, // change this line
image: AssetImage('images/prop/lock.png'),
scale: 0.8,
),
),
),
),
],
),
)

Related

Texts visibly stacked on each other in flutter

Widget build(BuildContext context) {
return Swipable(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
This is my code and i've been adjusting and readjusting for over 3hrs.. I just need the text to show on the image that can be swiped. Please help me. Thanks
image:

Hello I think what you are needing is to use a Stack Widget instead of a Column widget. When using Stacks you can use a Positioned widget to indicate exactly where you want your child widgets to be displayed inside of the stack as well.
Widget build(BuildContext context) {
return Swipable(
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Positioned(
top: 16,
right: 16,
child: Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
Happy Coding!

You can use this way
Widget build(BuildContext context) {
return Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
widget.urls,
fit: BoxFit.cover,
),
),
height: MediaQuery.of(context).size.height * 0.57,
width: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
widget.usernames,
style: TextStyle(color: Colors.orange),
),
),
),
],
);
//onSwipeLeft: () => _returnString(index),
}

flutter : How to make Card Radio Button?

I want make card Radio Button.
I want make card Radio Button.I want make card Radio Button.
I want make card Radio Button.I want make card Radio Button.
I want make card Radio Button.
I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.I want make card Radio Button.
This is my code
import 'package:cwc/ui/Home/homePage.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class LandingPage extends StatefulWidget {
const LandingPage({Key? key}) : super(key: key);
#override
_LandingPageState createState() => _LandingPageState();
}
class _LandingPageState extends State<LandingPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.png"),
fit: BoxFit.cover,
),
),
width: double.infinity,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 80,
),
Text(
'Membership Packages',
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
'Choose a membership plan to unlock all the features of the CWC Wellness Resource App',
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
fontSize: 14,
color: Colors.white,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 13,
),
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Container(
decoration: const BoxDecoration(
// borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage("assets/ona.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 1.75,
color: Colors.transparent,
),
Image.asset(
'assets/onaa.png',
height: 114,
width: 114,
),
],
)),
),
),
const SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/onb.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 1.75,
color: Colors.transparent,
),
Image.asset(
'assets/onbb.png',
height: 114,
width: 114,
),
],
)),
),
const SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/onc.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 1.75,
color: Colors.transparent,
),
Image.asset(
'assets/oncc.png',
height: 114,
width: 114,
),
],
),
),
),
],
),
],
),
),
),
),
bottomNavigationBar: GestureDetector(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Container(
color: Color(0xff3a99a4),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60))),
width: double.infinity,
height: 57,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(27, 0, 0, 0),
child: Container(
width: 18,
height: 18,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
'Continue',
style: GoogleFonts.poppins(
fontSize: 14,
color: Color(0xFF158998),
fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 27, 0),
child: const Icon(
Icons.arrow_right_alt_outlined,
size: 18,
color: Color(0xFF158998),
),
),
],
),
)))));
}
}
I Created this.
But I want like this.

To achieve that you need to wrap your widgets inside Stack widget and also have to assign position to each like below code below. Just replace you Column with this :
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
bottom: 8,
top: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context)
.size
.width /
1.75,
color: Colors.transparent,
),
Image.network(
"https://cdn.pixabay.com/photo/2017/07/08/09/49/red-2483933_960_720.jpg",
height: 114,
width: 114,
),
],
)),
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Radio(
activeColor: Colors.green,
overlayColor: MaterialStateProperty.all(
Colors.red),
value: 1,
groupValue: 1,
onChanged: (int? value) {},
),
),
),
),
],
),
),
),
),
Divider(color: Colors.transparent,),
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
bottom: 8,
top: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context)
.size
.width /
1.75,
color: Colors.transparent,
),
Image.network(
"https://cdn.pixabay.com/photo/2017/07/08/09/49/red-2483933_960_720.jpg",
height: 114,
width: 114,
),
],
)),
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Radio(
activeColor: Colors.green,
overlayColor: MaterialStateProperty.all(
Colors.red),
value: 1,
groupValue: 1,
onChanged: (int? value) {},
),
),
),
),
],
),
),
),
),
Divider(color: Colors.transparent,),
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
bottom: 8,
top: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context)
.size
.width /
1.75,
color: Colors.transparent,
),
Image.network(
"https://cdn.pixabay.com/photo/2017/07/08/09/49/red-2483933_960_720.jpg",
height: 114,
width: 114,
),
],
)),
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Radio(
activeColor: Colors.green,
overlayColor: MaterialStateProperty.all(
Colors.red),
value: 1,
groupValue: 1,
onChanged: (int? value) {},
),
),
),
),
],
),
),
),
),
],
),

how to stack image to show in the background

Please pardon me to post this.
i am working with this design more that 3 days now i can i get the actual design. all my effort design is been rejected.
i am trying to create this design.
the problem i have is the right and left box showing at the back of the image.
thanks in advance.
here is my code
Container(
child: Card(
shape:RoundedRectangleBorder(borderRadius:
BorderRadius.circular(25.0),
),
semanticContainer:true,
clipBehavior:
Clip.antiAliasWithSaveLayer,
child:Image(image:
NetworkImage(snapshot.data.docs[index].data()['picture'], ),
fit: BoxFit.cover,), ),),);

Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.pinkAccent,
Colors.yellowAccent,
],
),
),
child: Stack(
children: [
Positioned(
left: 70,
// right: 40,
top: 40,
child: Transform.rotate(
angle: pi - 3.30,
child: Container(
// transform: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white.withOpacity(0.2),
),
height: 200,
width: 150,
),
),
),
Positioned(
left: 130,
// right: 150,
top: 78,
child: Transform.rotate(
angle: pi + 3.30,
child: Container(
// transform: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white.withOpacity(0.6),
),
height: 190,
width: 150,
),
),
),
Positioned(
left: 0,
right: 0,
top: 50,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 100.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
image: DecorationImage(
image: NetworkImage("https://picsum.photos/200/300"),
fit: BoxFit.fill
),
),
height: 220,
width: 100,
),
),
),
],
),
),
);

Result
If you like change, black shadow play with stops inside gradient. hope you will get the idea of doing it.
stops: [.5, 1.0],
To AlignWidgte change this valuealignment: Alignment(-1, -1),. For rotation change here. Better use slider or from dart:math use pi.
Transform.rotate(angle: -.166,
Code snippet
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
get imageWidth => 300;
get imageHeight => 450;
double sliderVal = 0.0;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
),
),
home: Scaffold(
body: Column(
children: [
Slider(
value: sliderVal,
onChanged: (v) {
setState(() {
sliderVal = v;
print(sliderVal);
});
}),
Container(
width: imageWidth * 1.4,
height: imageHeight * 1.1,
child: Stack(
children: [
Align(
alignment: Alignment(-1, -1),
child: Transform.rotate(
angle: -.166,
child: backImage(color: Colors.blue),
),
),
Align(
alignment: Alignment(1, 1),
child: Transform.rotate(
angle: .128,
child: backImage(color: Colors.yellow),
),
),
Center(
child: mainImage(),
),
],
),
),
],
),
),
// CustomSS(),
);
}
backImage({required Color color, double? width, double? height}) {
return Container(
width: width ?? imageWidth,
height: height ?? imageHeight,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
),
);
}
SizedBox mainImage() {
return SizedBox(
width: imageWidth,
height: imageHeight,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
"assets/me.jpg",
fit: BoxFit.cover,
),
Container(
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [.5, 1.0],
colors: [
Colors.transparent,
Colors.black87,
],
),
),
),
Positioned(
bottom: 30,
left: 30,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Text(
"Yeasin",
style: TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 8,
),
Text(
"XX",
style: TextStyle(
fontSize: 22,
color: Colors.white,
),
)
],
),
SizedBox(
height: 10,
),
Text(
"Description",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
]),
)
],
),
));
}
}

How can I create this UI in flutter? please help me out :

https://i.stack.imgur.com/rQYu0.png
I'm new to flutter, and I've been trying to build this ui but it's way out of my league !
Here's my code so far:
(by the way I didn't use any specific package...)
My biggest challenge are the angles of that circle !
How can I create that circle? Is there a package for it ?
class NowPlaying extends StatefulWidget {
#override
_NowPlayingState createState() => _NowPlayingState();
}
class _NowPlayingState extends State<NowPlaying> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Container(
color: btmGreen,
height: 60,
width: size.width,
child: Row(
children: <Widget>[
GestureDetector(
child:
cbutton(back),
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>NowPlaying()));
},
),
Spacer(),
Container(
height: 35,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
// topLeft: Radius.circular(30),
bottomLeft: Radius.circular(260)),
color : PrimaryGreen,
),
)
],
),
),
Container(
// color: Colors.white,
child: Row(
children: <Widget>[
buildVerticalMenu(size),
ClipRRect(
borderRadius: BorderRadius.circular(370),
child: Container(
color: Orange,
height: 400,
width: 400,
child: ClipRRect(
borderRadius: BorderRadius.circular(370),
child: Container(
// padding: EdgeInsets.fromLTRB(110, 110, 0.0, 110),
height: 360,
width: 360,
decoration: BoxDecoration(
color: PrimaryGreen,
borderRadius: BorderRadius.all(Radius.circular(200)),
image: DecorationImage(
alignment: Alignment.bottomCenter,
fit: BoxFit.fill,
image: AssetImage("assets/images/hiphop.jpg"),
),
),),
),
),
),
],
),
)
],
),
);
}
Widget buildVerticalMenu(Size size){
return Container(alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(60)),
color: Colors.white,
),
height: size.height*0.3,
width: 70,
child: RotatedBox(
quarterTurns: -1,
child: Text('Now Playing', style: TextStyle(fontSize: 20 , fontWeight: FontWeight.w700,color: PrimaryGreen),)),
);
}
}

Problems with child and brackets

Morning guys,
I´ve problems with bracket and childs. When I combined Containers, Center and Stack and so on , it shows me most of the time red lines under some words. It´s always luck when I can solve it. Here is a part of my code where I will show you what I mean..
The problem is the first child after children:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/kreis.jpeg"), fit: BoxFit.fill)),
child: Stack(
children: <Widget>[
child:Container(
Center(
Visibility(
child: Text("Gone"),
visible: visibleT,
child:Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/T.jpeg"),fit: BoxFit.fill),
),
),
),
Visibility(
child: Text("Gone") ,
visible: visibleB,
child:Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/B.png"),fit: BoxFit.fill),
),
),
),
Visibility(
child:Text("Gone"),
visible: visibleH,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/h.png"),fit: BoxFit.fill),
),
),
)
),
Positioned(
right: 150,
top: 150,
width: 60,
height: 70,
child: FloatingActionButton(
onPressed:
_listen,
// setState(() { searchWord="Tinte";});
// getText();
child: Icon(_isListening ? Icons.mic : Icons.mic_none),
)
),
Positioned(
left: 100,
bottom: 10,
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.cyanAccent[100],
borderRadius: BorderRadius.circular(6.0),
),
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 12.0,
),
child: Text(
_text,
style: TextStyle(fontSize: 24.0),
)
)
)
)
]
)
)
);
}
this is not the end, but I think this was the critical part

You must consider the tree structure in nested widgets!
Fixed:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/kreis.jpeg"), fit: BoxFit.fill)),
child: Stack(children: <Widget>[
Container(
child: Center(
child: Visibility(
replacement: Text("Gone"),
visible: visibleT,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/T.jpeg"), fit: BoxFit.fill),
),
),
))),
Visibility(
replacement: Text("Gone"),
visible: visibleB,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/B.png"), fit: BoxFit.fill),
),
),
),
Visibility(
replacement: Text("Gone"),
visible: visibleH,
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/h.png"), fit: BoxFit.fill),
),
),
),
Positioned(
right: 150,
top: 150,
width: 60,
height: 70,
child: FloatingActionButton(
onPressed: _listen,
// setState(() { searchWord="Tinte";});
// getText();
child: Icon(_isListening ? Icons.mic : Icons.mic_none),
)),
Positioned(
left: 100,
bottom: 10,
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.cyanAccent[100],
borderRadius: BorderRadius.circular(6.0),
),
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 12.0,
),
child: Text(
_text,
style: TextStyle(fontSize: 24.0),
)))
])));
}

Some widget only allow multiple children, in your code it look like you have multiple child for widget which can only handle one child only. Like stack allow multiple child but container do not allow multiple child. Please check all container code there is multiple child in the container widget.
Edit:
Error free code, please share design for the app so all widgets could be properly aligned.
here is the code
bool _isListening = false;
bool visibleT = true;
bool visibleH = true;
bool visibleB = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/logo.png"), fit: BoxFit.fill)),
child: Stack(
children: [
Container(
child: Center(
child: Visibility(
visible: visibleT,
child: Column(
children: [
Text("Gone"),
Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/logo.png"),
fit: BoxFit.fill),
),
),
],
),
),
),
),
Container(
child: Center(
child: Visibility(
visible: visibleB,
child: Column(
children: [
Text("Gone"),
Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/logo.png"),
fit: BoxFit.fill),
),
),
],
),
),
),
),
Container(
child: Center(
child: Visibility(
visible: visibleH,
child: Column(
children: [
Text("Gone"),
Container(
height: 150,
width: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/logo.png"),
fit: BoxFit.fill),
),
),
],
),
),
),
),
Positioned(
left: 100,
bottom: 10,
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.cyanAccent[100],
borderRadius: BorderRadius.circular(6.0),
),
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 12.0,
),
child: Text(
"Some Text",
style: TextStyle(fontSize: 24.0),
)))
],
),
),
floatingActionButton: Positioned(
right: 150,
top: 150,
width: 60,
height: 70,
child: FloatingActionButton(
child: Icon(_isListening ? Icons.mic : Icons.mic_none),
),
),
);
}