following is my code I have taken the screenshot of the image and showing here but the image is showing side border
class ResultImage extends StatelessWidget {
final Image image;
// File file;
ResultImage({Key key, this.image}) : super(key: key);
#override
Widget build(BuildContext context) {
// file=File(image);
return Scaffold(
appBar: AppBar(
title: Text("View Image"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
tooltip: 'Share',
onPressed: () => {},
),
],
),
body: Container(
child: image,
));
}
}
Resolved issue by applying height: double.infinity,width: double.infinity to fix your issue.
class ResultImage extends StatelessWidget {
final Image image;
// File file;
ResultImage({Key key, this.image}) : super(key: key);
#override
Widget build(BuildContext context) {
// file=File(image);
return Scaffold(
appBar: AppBar(
title: Text("View Image"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
tooltip: 'Share',
onPressed: () => {},
),
],
),
body: Container(
height: double.infinity,
width: double.infinity,
child: image,
));
}
}
Try with this;
class ResultImage extends StatelessWidget {
final Image image;
// File file;
ResultImage({Key key, this.image}) : super(key: key);
#override
Widget build(BuildContext context) {
// file=File(image);
return Scaffold(
appBar: AppBar(
title: Text("View Image"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
tooltip: 'Share',
onPressed: () => {},
),
],
),
body: Expanded(
child: image,
));
),
),
);
}
}
Should set image fit as 'fit: BoxFit.fill', ex -
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Stack'),
),
body:
GestureDetector(
child: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: AssetImage('images/splash.png'),
fit: BoxFit.fill),
),
),
onTap: () {},
),
);
}
Related
appBar: AppBar(
elevation: 0.0,
title: Text(gazung),
backgroundColor: Color(0xffDBDDE0),
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Color(0xff9CA2B0),
),
child: Text('2021-02 개정 기준'),
),
ListTile(
tileColor: Color(0xffDBDDE0),
title: Text('2021-02 개정 기준'),
onTap: (){
setState(() {
gazung = 'changedaapbartext';
});
I output the title of the app bar as a variable called gazung and setstate in the drawer to change it, but it is not applied to the title of the appbar.
You can try with this code, i did not get any issue.
class ApBarTest extends StatefulWidget {
const ApBarTest({Key? key}) : super(key: key);
#override
State<ApBarTest> createState() => _ApBarTestState();
}
class _ApBarTestState extends State<ApBarTest> {
String gazung = 'Title';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text(gazung),
backgroundColor: Color(0xffDBDDE0),
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Color(0xff9CA2B0),
),
child: Text('2021-02 개정 기준'),
),
ListTile(
tileColor: Color(0xffDBDDE0),
title: Text('2021-02 개정 기준'),
onTap: () {
setState(() {
gazung = 'changedaapbartext';
});
})
],
),
),
);
}
}
I want to add a Drawer to the icon button but it's outside of appbar
here in this code, I tried to implement it by watching some tutorial but its not working for me maybe cuz I used endDraw anyone have idea how to do it?
here is my code
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
endDrawer: Drawer2() ,
appBar: AppBar(
backgroundColor: MyColor.backgroud_primary_color,
leading: Icon(
Icons.chevron_left_rounded,
color: MyColor.icon_color,
),
centerTitle: true,
title: Container(
width: 100,
height: 100,
child: Image(
image: AssetImage("assets/logo.png"),
fit: BoxFit.contain,
),
),
actions: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: IconButton(
onPressed: () => _scaffoldKey.currentState!.openDrawer(),
icon: Icon(Icons.sort),
iconSize: 30,
color: MyColor.icon_color,
),
)
],
),
Drawer2() is a custom drawer that I have made I want to open the end drawer when I click on Icon button is there any way?
import 'package:flutter/material.dart';
class DemoScreen extends StatelessWidget {
const DemoScreen({ Key? key }) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Demo Screen"),),
endDrawer: Drawer2(),
body: Center(
child: Text("data")
),
);
}
}
class Drawer2 extends StatelessWidget {
const Drawer2({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer( // Custom widget must be return Drawer
child: ListTile( //Implement any design on child property
title: Text("Demo tile"),
),
);
}
}
Use:
Scaffold.of(context).openEndDrawer()
and if you want to disable the drag behavior set this in Scaffold:
drawerEnableOpenDragGesture: false,
To open the drawer you need to use _scaffoldKey.currentState!.openEndDrawer(),
based on endDrawer docs, here
So, your code should be:
actions: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: IconButton(
onPressed: () => _scaffoldKey.currentState!.openEndDrawer(),
icon: Icon(Icons.sort),
iconSize: 30,
color: MyColor.icon_color,
),
)
],
i have a favorite icon that exist on page (A) that changes it's color whenever i click, the problem is when i move to another page and go back to page (A) icon goes to regular color, it doesn't save the changes on page , is there a way to keep the changes even after moving from page to page ?
Thanks.
If you push and pop back, then you can find the saved state from the route. How-ever if you pop back, current page state will be removed from stack. To handle this, you need to use state-management property. You can use StateProvider in this case, or the thing that suit for your project.
Demo:
class PageA extends StatefulWidget {
PageA({Key? key}) : super(key: key);
#override
_PageAState createState() => _PageAState();
}
class _PageAState extends State<PageA> {
Color color = Colors.deepOrange;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PAge A"),
),
body: Center(
child: Column(
children: [
Container(
width: 400,
height: 400,
color: color,
alignment: Alignment.center,
child: Text("init Color:deepOrange "),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PageB(),
));
},
child: Text("Move to B"),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Colors.deepPurple;
});
},
),
);
}
}
class PageB extends StatefulWidget {
const PageB({Key? key}) : super(key: key);
#override
_PageBState createState() => _PageBState();
}
class _PageBState extends State<PageB> {
Color color = Colors.greenAccent;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PAge B"),
),
body: Center(
child: Column(
children: [
Container(
width: 400,
height: 400,
color: color,
alignment: Alignment.center,
child: Text("init Color:greenAccent "),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PageC(),
),
);
},
child: Text("Move to C"),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Move Back to A, you can find last saved state"),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Colors.black;
});
},
),
);
}
}
class PageC extends StatefulWidget {
PageC({Key? key}) : super(key: key);
#override
_PageCState createState() => _PageCState();
}
class _PageCState extends State<PageC> {
Color color = Colors.amberAccent;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PAge C"),
),
body: Center(
child: Column(
children: [
Container(
width: 400,
height: 400,
color: color,
child: Center(child: Text("init Color:amberAccent ")),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PageB(),
),
);
},
child: Text("Push to B, will assing new state on route"),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"pop to B\n if you pop then current state of Page B will be visible"),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Colors.pink;
});
},
),
);
}
}
bottomsheet(not bottombar) which stay alway on top of entire app.if open an page it always stay on top
WidgetsApp(
debugShowCheckedModeBanner: false,
color: Colors.pink,
builder: (context, child) => Stack(
children: [
GetMaterialApp(
debugShowCheckedModeBanner: false,
color: Colors.pink,
home: Scaffold(
backgroundColor: Colors.amber,
body: Center(
child: TextButton(
onPressed: () {},
child: Text(
'data',
),
),
),
),
),
//bottomsheet
Positioned(
bottom: 0,
left: 0,
right: 0,
child: PlayerSheet(),
)
],
),
);
something like above
Create something like this as your page wrapper:
class StickyPageWrapper extends StatelessWidget {
final Widget child;
const StickyPageWrapper({Key key, this.child}) : super(key: key);
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Stack(
fit: StackFit.expand,
children: [
child,
Positioned(
left: 0,
bottom: 0,
child: Hero(
tag: 'bottom_sheet',
child: Container(
color: Colors.orange,
height: size.height / 4,
width: size.width,
),
),
)
],
);
}
}
Then use it like this for one page:
class Page1 extends StatelessWidget {
const Page1({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: StickyPageWrapper(
child: Container(
color: Colors.white38,
child: Center(
child: ElevatedButton(
child: Text('Go to page 2'),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => Page2()));
},
)),
)),
);
}
}
Then for the other page:
class Page2 extends StatelessWidget {
const Page2({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: StickyPageWrapper(
child: Container(
color: Colors.white38,
child: Center(
child: ElevatedButton(
child: Text('Go back to page 1'),
onPressed: () {
Navigator.of(context).pop();
},
)),
)),
);
}
}
And so on, so you wrap your every page.
I added a Hero animation to your BottomSheet when navigating between pages: https://flutter.dev/docs/development/ui/animations/hero-animations so that it looks bit nicer and more natural.
Hope this helps, let me know if I can help further.
Note: This is actually not a BottomSheet widget if that was your idea, because typically that one is created implicitly by ScaffoldState.showBottomSheet, for persistent bottom sheets, or by showModalBottomSheet, for modal bottom sheets.
I'm new to flutter so please bear with me. When I implement an app bar, sometimes it only has a title, some other time it has a title and returns button on the left of the bar, also, sometimes it adds another button on the right of the bar. I have to layout differently to suit different situations which are quite troublesome. Is there a convenient widget that provides three optional properties to allow me to set my title, left button, and right button or any good layout strategy? What I have done is below.
AppBar(
backgroundColor: Colors.gray,
elevation: 0.0,
title: Container(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(bottom: ScreenUtil.dp(11)),
height: ScreenUtil.dp(22),
width: ScreenUtil.dp(160),
child: Text(
'title',
style: TextStyle(
fontSize: ScreenUtil.sp(17), fontFamily: FontFamily.family, color: Colors.black, fontWeight: FontWeight.w600
)
),
alignment: Alignment.center,
),
),
),
),
```
You should learn more about the Appbar with other properties to assist with the things you need like leading, trailing, ...
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: MyStatelessWidget(),
);
}
}
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));
void openPage(BuildContext context) {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Next page'),
),
body: const Center(
child: Text(
'This is the next page',
style: TextStyle(fontSize: 24),
),
),
);
},
));
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
leading: Icon(Icons.navigate_next),
title: const Text('AppBar Demo'),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
scaffoldKey.currentState.showSnackBar(snackBar);
},
),
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Next page',
onPressed: () {
openPage(context);
},
),
],
),
body: const Center(
child: Text(
'This is the home page',
style: TextStyle(fontSize: 24),
),
),
);
}
}