Here is my webview
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Visibility(visible: checkDownload, child: CircularProgressIndicator()),
Expanded(
child: Center(
child: WebviewScaffold(
url: weburl,
withZoom: true,
hidden: true,
appBar: AppBar(
title: Text('View ' + type),
actions: [
IconButton(
icon: Icon(Icons.print),
onPressed: () {
getPermission('print');
}),
],
),
bottomNavigationBar: _bottomTab(),
),
),
)
],
);
}
I am implementing webview in my Flutter application which has to be center of the page. But the issue is my webview is locating top of the page and also I have tried giving center widget to locate the webview into center of page. But it doesn't work.
the problem is that your Stack widget is does not automatically wrap to the size of it's children. currently your stack is tiny an automatically aligned to the top left corner. so aligning it's children to the center wont make a difference.
a better solution would be:
#override
Widget build(BuildContext context) {
return Expanded(
child: Stack(
children: <Widget>[
Visibility(visible: checkDownload, child: CircularProgressIndicator()),
Align(
alignment: Alignment.center,
child: WebviewScaffold(
url: weburl,
withZoom: true,
hidden: true,
appBar: AppBar(
title: Text('View ' + type),
actions: [
IconButton(
icon: Icon(Icons.print),
onPressed: () {
getPermission('print');
},
),
],
),
bottomNavigationBar: _bottomTab(),
),
),
],
),
);
}
Webview in center of the page you can set as below,
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('View ' + type),
actions: [
IconButton(
icon: Icon(Icons.print),
onPressed: () {
getPermission('print');
},
),
],
),
body: Stack(
children: <Widget>[
Visibility(visible: checkDownload, child: Center(
child: CircularProgressIndicator(),
)),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height/1.5,
child: WebviewScaffold(
url: weburl,
withZoom: true,
hidden: true,
bottomNavigationBar: _bottomTab(),
),
),
),
],
),
);
}
Related
I'm trying to show CircularProgress center of my webview inside stack but its showing bottom.
I used expanded widget to use available space for webview.
My code :
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: WillPopScope(
onWillPop: () async {
print("back pressed");
return false;
},
child: Column(
children: [
webProgress < 1
? SizedBox(
height: 5,
child: LinearProgressIndicator(
value: webProgress,
color: Colors.blue,
backgroundColor: Colors.white,
),
)
: SizedBox(),
Expanded(
child: WebviewScaffold(
url: "https://google.com",
mediaPlaybackRequiresUserGesture: false,
withLocalStorage: true,
),
),
isLoading
? Center(
child: CircularProgressIndicator(),
)
: Stack(),
],
),
),
),
);
}
}
this worked for me
the initial progress must be 0.0
Maybe try wrapping what you want to show circular progress above with a stack,
like this:
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: WillPopScope(
onWillPop: () async {
print("back pressed");
return false;
},
child: Column(
children: [
webProgress < 1
? SizedBox(
height: 5,
child: LinearProgressIndicator(
value: webProgress,
color: Colors.blue,
backgroundColor: Colors.white,
),
)
: SizedBox(),
Stack(
children: [
Expanded(
child: WebviewScaffold(
url: "https://google.com",
mediaPlaybackRequiresUserGesture: false,
withLocalStorage: true,
),
),
isLoading
? Center(
child: CircularProgressIndicator(),
)
: Container(),
],
),
],
),
),
),
);
}
I am trying to add ScrollBar to ListView in Flutter but the ScrollBar still have padding on top when scrolling to the start of the ListView.
I included a snapshot of the application so you can understand the problem better. it`s in the indicator of the scrollbar widget the top padding should not be there ,so the start of the scrollbar indicator should touch the bottom edge of the blue DrawerHeader.
here is my code:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
final sc = ScrollController(initialScrollOffset: 0);
final res = MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
body: null,
drawer: Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
margin: EdgeInsets.zero,
),
Expanded(
child: Scrollbar(
radius: Radius.circular(30),
thickness: 10,
controller: sc,
isAlwaysShown: true,
child: ListView(
shrinkWrap: false,
controller: sc,
padding: EdgeInsets.only(top: 0),
children: <Widget>[
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
...
],
),
),
),
],
),
), // Populate the Drawer in the next step.
),
),
);
return res;
}
}
result when scrolling position is 0:
use MediaQuery.removePadding widget with removeTop: true
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
final sc = ScrollController(initialScrollOffset: 0);
final res = MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
body: null,
drawer: Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
margin: EdgeInsets.zero,
),
Expanded(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Scrollbar(
radius: Radius.circular(30),
thickness: 10,
controller: sc,
isAlwaysShown: true,
child: ListView(
shrinkWrap: false,
controller: sc,
padding: EdgeInsets.only(top: 0),
children: <Widget>[
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
)
],
),
),
),
),
],
),
), // Populate the Drawer in the next step.
),
),
);
return res;
}
}
Scrollbar padding is set as follows:
ScrollbarPainter _buildMaterialScrollbarPainter() {
return ScrollbarPainter(
color: _themeColor,
textDirection: _textDirection,
thickness: widget.thickness ?? _kScrollbarThickness,
radius: widget.radius,
fadeoutOpacityAnimation: _fadeoutOpacityAnimation,
padding: MediaQuery.of(context).padding,
);
}
The solution to remove the padding in your case would be to place your Scaffold inside the SafeArea.
home: SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
I am trying to dynamically add photos to carousel_slider plugin, but I cannot simply add items to the list. Does anyone know how to add it?
My example below, shows that I am using a FloatActionButton to add an image into the imgList variable. But the carousel does not get this new added value.
I already tried to call setState() on the imgList variable. But no success.
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children:
[ FloatingActionButton(
onPressed: () {
print('save');
imgList.add( 'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80');
},
child: Icon(Icons.photo_camera),
heroTag: null,
),
SizedBox(
height: 10,
),
FloatingActionButton(
onPressed: () => print('save'),
child: Icon(Icons.check_circle),
heroTag: null,
),
],
),
appBar: AppBar(
title: Text('Test carousel'),
centerTitle: true,
elevation: 0.0,
toolbarOpacity: 0.5,
),
body: Container(
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
),
items: imgList.map((item) => Container(
child: Image.network(item, fit: BoxFit.cover, width: 1000),
color: Colors.green,
)).toList(),
))
);
I already try setState add image. It success.
You can try again.
My code:
List<String> _image = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRnltfxyRHuEEUE4gIZp9fr77Q8goigP7mQ6Q&usqp=CAU",
"https://imageproxy.themaven.net//https%3A%2F%2Fwww.history.com%2F.image%2FMTY1MTc3MjE0MzExMDgxNTQ1%2Ftopic-golden-gate-bridge-gettyimages-177770941.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU2U6QAHfoDaofFbNo4OLtaqYWzihF5d4fhw&usqp=CAU"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Modular"),
),
body: Center(
child: Column(
children: [
CarouselSlider(
options: CarouselOptions(
disableCenter: true
),
items: _image.map((e) => Container(
child: Image.network(e),
)).toList(),
),
FlatButton(
child: Text('abc'),
onPressed: (){
setState(() {
_image.add("https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg");
});
},
)
],
),
),
);
}
I'd like to center an image in appbar (As Twitter does in their mobilapps), but I can't find any logic that does that. I tried to wrap the Container with Center() but it didn't work.
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text('Cranes'),
actions: <Widget>[
Container(
// margin: const EdgeInsets.only(right: 75),
child: Image.asset(
'assets/hmf_logo_medium.png',
),
),
FlatButton(
onPressed: () async {
await Provider.of<FlutterSecureStorage>(context, listen: false)
.deleteAll();
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => LoginPage()),
(route) => false);
},
child: Text(S.of(context).craneListPageLogoutText,
style: TextStyle(color: Colors.white)),
)
],
),
); }
Try this
AppBar(
leading: Center(
child: Text('Cranes'),
),
title: Image.asset('assets/hmf_logo_medium.png'),
centerTitle: true,
)
You can wrap your all items with row then mainAxisAlignment.spaceBetween can handle that.
AppBar(
title:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Cranes'),
Container(
// margin: const EdgeInsets.only(right: 75),
child: Image.asset(
'assets/hmf_logo_medium.png',
),
),
FlatButton(
onPressed: () async {},
child: Text(S.of(context).craneListPageLogoutText,
style: TextStyle(color: Colors.white)),
)
],
),
),
Following would work :
AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Cranes'),
Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
height: 32,
),
Container()
],
),
)
Result :
in title Property Use your Image. and then make centerTitle:true,
AppBar(
backgroundColor: kWhite,
elevation: 0,
title: Image.asset(kLogoYellow),
centerTitle: true,
)
I faced some problem. I want make an image, a text and two icons in AppBar but I can't make it work as I want.
I tried to make some fonts in a row after the images and text. The images and the text successful show in my AppBar, but the rest of 2 fonts (Trolley and notifications) show some error.
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.amber,
appBar: new AppBar
(
title: new Row
(
mainAxisAlignment: MainAxisAlignment.start,
children:
[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
],
)
),
....
Use leading to set a widget before appBar title & use actions to specify list of widgets in appBar which appears on right side of appBar title.
AppBar(
leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
title: Text ("Your Title"),
actions: [
Icon(Icons.add),
Icon(Icons.add),
],
);
Read more about it here
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solid Shop"),
leading: Image.asset("your_image_asset"),
actions: <Widget>[
IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
}
You need to use actions instead of title
actions: <Widget>[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
],
You can add icon and also a picture on app bar, this code works for me:-
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/bell.png",
fit: BoxFit.contain,
height: 28,
),
Container(
child: Text(" APP BAR"),
)
],
),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Settings();
},
),
);
},
color: Colors.white,
)
],
),
Hope this was helpful.
You can combine it with Spacers :
actions: const [
Spacer(flex: 3),
Icon(Icons.fit_screen),
Spacer(flex: 10),
Icon(Icons.width_normal),
Spacer(flex: 1),
Icon(Icons.aspect_ratio),
Spacer(flex: 1),
Icon(Icons.ad_units),
Spacer(flex: 5),
],