I have this bit of code that shows image (or imagepath if saved) in DecorationImage, but the issue is that the transparent png transparency is seen as white background (the _logo is a File) Here's the code:
decoration: BoxDecoration(
image: DecorationImage(
image: _logopath != null
? FileImage(File(_logopath))
: _logo == null
? MemoryImage(kTransparentImage)
: FileImage(_logo),
fit: BoxFit.contain),
My question is if there is some way for the png image selected to be actually transparent as it is, and without the white background filling transparency.
I think it's already transparent.
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: '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> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Stack(
children: [
Container(
color: Colors.grey,
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
image: AssetImage('images/gyvegetable.png'),
),
),
),
],
),
),
);
}
}
Related
I have code like this
ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
child: Image.network(
image_link_from_api,
width: 100,
height: 100,
fit: BoxFit.fill,
),
),
I tried ClipRRect, avatar image, container with rounded corners, nothing seems to work, so how can I fill whole round image instead of something like this in above image?
I tried fill, cover, contain, every possible option
The effect of running your code:
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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(100.0)),
child: Image.network(
'https://i.ibb.co/37ZfCpQ/20230113213218image-thumbnail-media-433.jpg',
width: 100,
height: 100,
fit: BoxFit.fill,
),
),
],
),
),
);
}
}
I'm trying to create a curved container (semi circle) on whole screen using flutter
image for the curved
I tried to use some solutions found on stackoverflow but it didn't work.
can anyone help
thanks
Wrap your widget with stack and then provide clip oval to the container and positioned your container to the left with half of your container width.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Demo(),
);
}
}
class Demo extends StatelessWidget {
const Demo({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
top: -10,
bottom: -10,
left: -200,
child: ClipOval(
child: Container(
height: double.maxFinite,
width: 400,
color: Colors.black.withOpacity(0.5),
),
),
),
],
),
);
}
}
You will get the following output
The following Container inside a ListView, won't have a height, even though I specified one. Instead it expands to the entire ListView's height
import 'package:flutter/material.dart';
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: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: [
Container(
width: 100,
height: 20,
color: Colors.red)
])
);
}
}
According to https://api.flutter.dev/flutter/widgets/Container-class.html,
If the widget has no child and no alignment, but a height, width, or
constraints are provided, then the Container tries to be as small as
possible given the combination of those constraints and the parent's
constraints.
so shouldn't the Container be as small as possible, since it has constraints?
Have a look at Understanding Constraints in Flutter Docs.
The constraints given by the ListView to its children is too exactly fill the cross axis. Your Container cannot decide to have a size out of these constraints.
Remember, constraints go down, sizes go up.
You should position your Containers inside the ListView. In the following example, the first Container (Red) is not positioned, the second (Green) is Centered and the last (Blue) is Aligned on topLeft:
Center andAlign widgets both will take maximum height and give flexibility to their child, your Container.
Full source code:
import 'dart:math' show Random;
import 'package:flutter/material.dart';
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: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.grey.shade200,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: [
Container(width: 100, height: 20, color: Colors.red),
Center(
child: Container(width: 100, height: 10, color: Colors.green),
),
Align(
alignment: Alignment.topLeft,
child: Container(width: 100, height: 20, color: Colors.blue),
),
],
),
),
);
}
}
Try to wrap the ListView with a Container with a fixed height.
The ListView will take up all available space unless constrained, constraining the height of the ListView would fix the issue. You can wrap the ListView in a container with certain height (20, in your case).
I want to create a category selector with a gridview.
And I want them to have different sizes (Wrapping each).
To make gridview like below, What should I use.
Sorry for my English, and Thanks for your help.
use Wrap
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,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
var elements = [
'Android',
'Ios',
'Web front',
'Sever',
'Embedded Sofware',
'Design'
];
return Wrap(
children: elements.map((el) => _MyButton(name: el)).toList(),
);
}
}
class _MyButton extends StatelessWidget {
_MyButton({Key key, this.name}) : super(key: key);
final String name;
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.black,
width: 1,
style: BorderStyle.solid,
),
),
padding: EdgeInsets.all(20),
child: Text(name),
);
}
}
Is there a way to make Scaffold.bottomSheet partly transparent (like for a notch that shows the body content behind it)? I noticed that even adding just Text implicitly puts a white background (Material?) below it, and I think this is not configurable.
class MyHomePage extends StatefulWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: // ...
),
bottomSheet: Text('This is a bottom sheet'),
);
}
}
FWIW, Scaffold.bottomNavigationBar supports being semi-transparent (e.g. you can have a notch around FAB).
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
theme: ThemeData(
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: Colors.black.withOpacity(0.5)),
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(),
bottomSheet: Container(
height: 40,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('semi transparent bottom sheet :)', style: TextStyle(color: Colors.white),))
),
);
}
}
this was previously posted