How do I make Scaffold.bottomSheet partly transparent? - flutter

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

Related

is it possible to make the checkbox align center in listtile in flutter

I am using the checkbox in listtile in flutter(v3.0.4) like this:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: 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({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Card(
child: ListTile(
visualDensity: VisualDensity(vertical: 3), // to expand
title: Text("dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"),
leading: Checkbox(
value: true,
onChanged: (bool? value) {
if (value!) {}
})))) // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
when the listtile text expand, the checkbox always align to the top like this:
what should I do to make the checkbox always align to the center of vertical in the card component?
Try
Center(child: checkbox)
Or
Centet(child:
Column(
mainAxisSize:MainAxisSize.min,
mainAxisAlignment:MainAxisAlignement.center,
crossAxisAlignment: crossAxisAlignment.Center,
Children: [ Checkbox()]

Fill Icons with color in Flutter

I'm currently working on a Flutter project. I have been given Icons by the designer.
One of the Icons looks like this
Now I'd like to fill the inside of the Icon with color so that it looks like this
How can I achieve this in flutter? I really tried a lot. Like using ClipRect and other Classes. But none gave the desired results.
Try this one.
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: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
bool _isBluetoothOn = false;
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>[
IconButton(
onPressed: () async {
print(_isBluetoothOn);
setState(() {
_isBluetoothOn = !_isBluetoothOn;
});
print(_isBluetoothOn);
},
icon: Icon(
_isBluetoothOn ? Icons.favorite : Icons.favorite_border,
color: Colors.greenAccent,
size: 40,
),
),
],
),
),
);
}
}
You can simply ask designer for filled icons too and show them when they are clicked.
So it goes like this:
if button clicked:
show filledIcon
else:
show unfilledIcon
You can code that in Flutter like:
icon:clicked? Icon(filledIcon):Icon(unfilledIcon)
This is the easiest way to do this.

Flutter: how to create moveable widget

I have tried to create a moveable text widget.
When I press on widget and start moving finger around screen (still pressing on widget), then position of widget should be also moved.
I have tried to do this with GestureDetector and Transform widgets.
Here is code:
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: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MoveText(),
],
),
),
);
}
}
class MoveText extends StatefulWidget{
#override
_MoveTextState createState() => _MoveTextState();
}
class _MoveTextState extends State<MoveText> {
Offset offset = Offset(0.0, 0.0);
#override
Widget build(BuildContext context) {
return GestureDetector(
onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
print('${details.localPosition}');
},
onPanStart: (details){
},
onPanUpdate: (details){
print('Pan update ${details.localPosition}');
setState((){
offset = details.localPosition;
});
},
onPanCancel: (){
print('Pan cancel');
},
child: Transform(
transform: Matrix4.translationValues(offset.dx, offset.dy, 0.0),
child: Container(
height: 50,
width: 200,
color: Colors.yellow,
child: Text('Some text for test'),
),
),
);
}
}
When I first tap on widget and start moving everything works great, but when I stop and want again to start moving, then onPanUpdate isn't called.
Does anyone have some solution for this problem?
What you need is a Draggable widget.
Visit for more info: https://api.flutter.dev/flutter/widgets/Draggable-class.html

How to render widgets under notch in Flutter?

By default, Flutter respects the SafeArea around the notch.
After SystemChrome.setEnabledSystemUIOverlays([]) (to remove time, overlay etc.) then setting SafeArea to false on all sides, there is still a blank area around the notch:
How can I make the app render without considering the notch? i.e. the AppBar should display under the black notch area.
Code:
import 'package:flutter/material.dart';
import 'package:flutter/services.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'),
);
}
}
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) {
SystemChrome.setEnabledSystemUIOverlays([]);
return SafeArea(
top: false,
bottom: false,
left: false,
right: false,
child: Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: Text(
'hello stack overflow',
),
),
),
);
}
}

Flutter: FloatingActionButton has no shadows and touch animation

The default FAB in the demo app has shadows and a ripple effect when touched.
However, when the FAB is moved to another class, it suddenly loses this effect, which makes it look rather plain.
Is it possible to bring the shadows and ripple animations to the plain looking FAB while keeping it in a separate class?
Main.dart
import 'package:test_app/TestItem1.dart';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new TestItem1(),
);
}
}
TestItem1.dart
import 'package:flutter/material.dart';
class TestItem1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'test 1',
),
new Text(
'test1',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Increment',
onPressed: null,
child: new Icon(Icons.add),
),
);
}
}
The floating action button is disabled by default if you gave nothing to
onPresss()
if you don't want to give in onPress just pass (){} an anonymous method