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(),
],
),
],
),
),
),
);
}
Related
I'm try to open some page from appbar tabs. I expect when i click the listView item, it will return a new page. It is return a new page but bottom bar not hiding. How can i fixed it? Maybe screenshots will help.
And onTap method;
onTap: () {
String kacinciAy = (index + 1).toString();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Ay(
kacinciAy: kacinciAy,
),
),
);
},
And my navBar codes
return MaterialApp(
home: DefaultTabController(
length: 5,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(35),
child: Container(
color: Colors.green,
child: SafeArea(
child: Column(
children: [
Expanded(child: Container()),
TabBar(
tabs: [
Text("Günlük"),
Text("Takvim"),
Text("Hafta"),
Text("Ay"),
Text("Toplam")
],
),
],
),
),
),
),
body: TabBarView(
children: [
GunlukVeri(context),
Takvim(),
Hafta(),
Denek(),
Column(
children: [Text("toplam")],
),
],
)),
),
);
}
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(),
),
),
),
],
),
);
}
I'm beginner in flutter and programming, want To set counter that count images number when it scroll down and also tell remaining pages instead of hardcoded text('1/6'). here it's code
int counter=0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Center(
child: Text('Surah Yaseen' ' (1/6) ', style: TextStyle(fontSize: 30.0),
),
),
),
body: PageView(
scrollDirection: Axis.vertical,
allowImplicitScrolling: true,
children: [
Container(
child: Image.asset('images/1.jpg'),
),
Container(
child: Image.asset('images/2.jpg'),
),
Container(
child: Image.asset('images/3.jpg'),
),
Container(
child: Image.asset('images/4.jpg'),
),
Container(
child: Image.asset('images/5.jpg'),
),
Container(
child: Image.asset('images/6.jpg'),
)
],
),
);
}
}
Try this:
final controller = PageController(
initialPage: 0,
);
final _currentPageNotifier = ValueNotifier<int>(0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Center(
child: Text('Surah Yaseen' ' (${_currentPageNotifier.value}/6) ', style: TextStyle(fontSize: 30.0),
),
),
),
body: PageView(
scrollDirection: Axis.vertical,
allowImplicitScrolling: true,
onPageChanged: (index) {
setState(() {
_currentPageNotifier.value = index+1;
});
},
controller: controller,
children: [
Container(
child: Image.asset('images/1.jpg'),
),
Container(
child: Image.asset('images/2.jpg'),
),
Container(
child: Image.asset('images/3.jpg'),
),
Container(
child: Image.asset('images/4.jpg'),
),
Container(
child: Image.asset('images/5.jpg'),
),
Container(
child: Image.asset('images/6.jpg'),
)
],
),
);
}
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,
)