I've spent almost two days trying to figure out how to make a webview scrollable in a tabbarview in Flutter. I understand that the TabBarWiew Widget should be wrapped in a fixed height widget, what can be a workaround for this?
I don't know if it can help but my minSdkVersion is 16 and targetSdkVersion is 28,
And this is the output of flutter --version command
Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (10 weeks ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0
Below is the code for the page I'm building.
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.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(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Pays'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
double screenHeight = MediaQuery.of(context).size.height;
final List<Tab> myTabs = <Tab>[
Tab(text: 'LEFT'),
Tab(text: 'RIGHT'),
];
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: myTabs.length);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
backgroundColor: Colors.red[800],
),
body: Container(
color: Colors.grey[100],
child: ListView(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Image.network(
'https://lh3.googleusercontent.com/proxy/dThF-49TD0synkY_v1F0mh2HQFp_P5bxYvdLI1msK-aD7h4CtzctJpJP3Cm89LyAWAg21xqvUDdQjdRi2yDH4iEU1wr_LT3BO8iOmx141QOtzXPgUpXW7ulAlHUtAJ4Z0yea_Qr4sWZfApns3VuAbxNcTNISWdStSoJEZ9-OmRypu-3YTQ',
height: 150,
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter,
filterQuality: FilterQuality.high,
)),
],
),
SizedBox(
height: 1,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('237',
style: TextStyle(
color: Colors.black,
fontSize: 35,
fontWeight: FontWeight.bold)),
SizedBox(
width: 5,
),
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJrM_W9cpz33KFyqL_L-meeCuH_Kyufoohxjlh06XdBnIbel0j&s',
height: 30,
),
Spacer(),
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwnqIeW1RJHtAhRE7ccZ-4s4ymEh5zHRYAdidO7p9GfDnOwziY&s',
height: 50,
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Cameroun',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold),
)
]),
),
SizedBox(height: 5),
NestedTabBar()
],
)),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class NestedTabBar extends StatefulWidget {
#override
_NestedTabBarState createState() => _NestedTabBarState();
}
class _NestedTabBarState extends State<NestedTabBar>
with TickerProviderStateMixin {
TabController _nestedTabController;
ScrollController _scrollController;
#override
void initState() {
//_scrollController = ScrollController();
super.initState();
_nestedTabController = new TabController(length: 2, vsync: this);
//_nestedTabController.addListener(_handleTabSelection);
}
#override
void dispose() {
_nestedTabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
return Column(
children: <Widget>[
TabBar(
controller: _nestedTabController,
indicatorColor: Colors.teal,
labelColor: Colors.teal,
unselectedLabelColor: Colors.black54,
isScrollable: true,
tabs: <Widget>[
Tab(
text: "A propos & Statistiques",
),
Tab(
text: "Wiki",
)
],
),
Container(
height: screenHeight * 0.9,
margin: EdgeInsets.only(left: 8.0, right: 8.0),
child: TabBarView(
controller: _nestedTabController,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
),
child: Text('Simple text')),
/*GestureDetector(
child: MyWebView(selectedUrl: 'https://fr.wikipedia.org/wiki/Lewis_Hamilton'),
),*/
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
),
child: MyWebView(
selectedUrl: 'https://fr.wikipedia.org/wiki/Cameroun'),
),
],
),
),
// MyWebView(selectedUrl: 'https://fr.wikipedia.org/wiki/Lewis_Hamilton')
],
);
}
}
class MyWebView extends StatefulWidget {
final String selectedUrl;
MyWebView({
#required this.selectedUrl,
});
#override
_MyWebViewState createState() => _MyWebViewState();
}
class _MyWebViewState extends State<MyWebView> {
Completer<WebViewController> _controller;
#override
void initState() {
super.initState();
_controller = Completer<WebViewController>();
}
#override
void dispose() {
super.dispose();
_controller = null;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: WebView(
initialUrl: widget.selectedUrl,
gestureRecognizers: Set()
..add(Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer())),
gestureNavigationEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
));
}
}
You can copy paste run full code below
You can use package https://pub.dev/packages/flutter_inappwebview
Step 1: change Android minSdkVersion to 17
Step 2: reference package with the following , because this issue. https://github.com/pichillilorenzo/flutter_inappwebview/issues/220
flutter_inappwebview:
git:
url: https://github.com/pichillilorenzo/flutter_inappwebview.git
ref: master
Step 3: code snippet
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
),
child: InAppWebView(
initialUrl: "https://fr.wikipedia.org/wiki/Lewis_Hamilton",
initialHeaders: {},
working demo
full code
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.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,
),
home: MyHomePage(title: 'Pays'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
final List<Tab> myTabs = <Tab>[
Tab(text: 'LEFT'),
Tab(text: 'RIGHT'),
];
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: myTabs.length);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
backgroundColor: Colors.red[800],
),
body: Container(
color: Colors.grey[100],
child: ListView(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Image.network(
'https://lh3.googleusercontent.com/proxy/dThF-49TD0synkY_v1F0mh2HQFp_P5bxYvdLI1msK-aD7h4CtzctJpJP3Cm89LyAWAg21xqvUDdQjdRi2yDH4iEU1wr_LT3BO8iOmx141QOtzXPgUpXW7ulAlHUtAJ4Z0yea_Qr4sWZfApns3VuAbxNcTNISWdStSoJEZ9-OmRypu-3YTQ',
height: 150,
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter,
filterQuality: FilterQuality.high,
)),
],
),
SizedBox(
height: 1,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('237',
style: TextStyle(
color: Colors.black,
fontSize: 35,
fontWeight: FontWeight.bold)),
SizedBox(
width: 5,
),
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJrM_W9cpz33KFyqL_L-meeCuH_Kyufoohxjlh06XdBnIbel0j&s',
height: 30,
),
Spacer(),
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwnqIeW1RJHtAhRE7ccZ-4s4ymEh5zHRYAdidO7p9GfDnOwziY&s',
height: 50,
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Cameroun',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold),
)
]),
),
SizedBox(height: 5),
NestedTabBar()
],
)),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class NestedTabBar extends StatefulWidget {
#override
_NestedTabBarState createState() => _NestedTabBarState();
}
class _NestedTabBarState extends State<NestedTabBar>
with TickerProviderStateMixin {
TabController _nestedTabController;
ScrollController _scrollController;
InAppWebViewController webView;
String url = "";
double progress = 0;
#override
void initState() {
//_scrollController = ScrollController();
super.initState();
_nestedTabController = new TabController(length: 2, vsync: this);
//_nestedTabController.addListener(_handleTabSelection);
}
#override
void dispose() {
_nestedTabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
return Column(
children: <Widget>[
TabBar(
controller: _nestedTabController,
indicatorColor: Colors.teal,
labelColor: Colors.teal,
unselectedLabelColor: Colors.black54,
isScrollable: true,
tabs: <Widget>[
Tab(
text: "A propos & Statistiques",
),
Tab(
text: "Wiki",
)
],
),
Container(
height: screenHeight * 0.9,
margin: EdgeInsets.only(left: 8.0, right: 8.0),
child: TabBarView(
controller: _nestedTabController,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
),
child: Text('Simple text')),
/*GestureDetector(
child: MyWebView(selectedUrl: 'https://fr.wikipedia.org/wiki/Lewis_Hamilton'),
),*/
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
),
child: InAppWebView(
initialUrl: "https://fr.wikipedia.org/wiki/Lewis_Hamilton",
initialHeaders: {},
initialOptions: InAppWebViewWidgetOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
)
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
onLoadStop: (InAppWebViewController controller, String url) async {
setState(() {
this.url = url;
});
},
onProgressChanged: (InAppWebViewController controller, int progress) {
setState(() {
this.progress = progress / 100;
});
},
),
),
],
),
),
// MyWebView(selectedUrl: 'https://fr.wikipedia.org/wiki/Lewis_Hamilton')
],
);
}
}
Add gestureRecognizers as a WebView parameter:
WebView(
gestureRecognizers: {
Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer()
)
},
initialUrl: widget.url,
);
As mentioned here: https://github.com/flutter/flutter/issues/33565
Related
The code below creates a Flutter simple application which contains 2 multi line TextField's. The left one uses a default keyboard with Enter button. Its onSubmitted: method is not called, so you can not execute a method once the user has finished editing the TextField. The right TextField replaces Enter by Done, which enables onDubmitted. Since Enter is no longer available on the keyboard, I am asking how can I add a new line on the right multi line widget.
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(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter TextField Multiple Lines'),
),
body: const MyStatefulWidget());
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
late TextEditingController _controllerEnter;
late TextEditingController _controllerDone;
#override
void initState() {
super.initState();
_controllerEnter = TextEditingController();
_controllerDone = TextEditingController();
}
#override
void dispose() {
_controllerEnter.dispose();
_controllerDone.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Multiline TextField Enter',
style: TextStyle(fontSize: 20),
),
Focus(
child: TextField(
style: const TextStyle(fontSize: 20),
maxLines: 3,
controller: _controllerEnter,
onSubmitted: (String value) {
// method never called !
debugPrint('\n*** onSubmitted: $value ***\n');
},
),
onFocusChange: (value) {
// this method compensate the fact that the
// TextField onSubmitted: method is not called.
if (!value) {
debugPrint('\n*** onFocusChange: ${_controllerEnter.text} ***\n');
}
},
),
],
),
),
const SizedBox(
width: 25,
),
SizedBox(
width: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Multiline TextField Done',
style: TextStyle(fontSize: 20),
),
TextField(
// How can Enter be used to add a new line to the TextField ?
style: const TextStyle(fontSize: 20),
maxLines: 3,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
controller: _controllerDone,
onSubmitted: (String value) {
debugPrint('\n*** onSubmitted: $value ***\n');
},
),
],
),
),
],
),
));
}
}
I don't think you can do both with native keyboards.
You can maybe build a custom keyboard. For example, you could use a package like https://pub.dev/packages/keyboard_actions
I am trying to achieve an effect where there is expandable content on the top end of a sidebar, and other links on the bottom of the sidebar. When the content on the top expands to the point it needs to scroll, the bottom links should scroll in the same view.
Here is an example of what I am trying to do, except that it does not scroll. If I wrap a scrollable view around the column, that won't work with the spacer or expanded that is needed to keep the bottom links on bottom:
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
State<MyWidget> createState() {
return MyWidgetState();
}
}
class MyWidgetState extends State<MyWidget> {
List<int> items = [1];
#override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.add),
onPressed: () {
setState(() {
items.add(items.last + 1);
});
},
),
IconButton(
icon: const Icon(Icons.delete),
onPressed: () {
setState(() {
if (items.length != 1) items.removeLast();
});
},
),
],
),
for (final item in items)
MyAnimatedWidget(
child: SizedBox(
height: 200,
child: Center(
child: Text('Top content item $item'),
),
),
),
Spacer(),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all()),
height: 200,
child: Text('Bottom content'),
)
],
);
}
}
class MyAnimatedWidget extends StatefulWidget {
final Widget? child;
const MyAnimatedWidget({this.child, Key? key}) : super(key: key);
#override
State<MyAnimatedWidget> createState() {
return MyAnimatedWidgetState();
}
}
class MyAnimatedWidgetState extends State<MyAnimatedWidget>
with SingleTickerProviderStateMixin {
late AnimationController controller;
#override
initState() {
controller = AnimationController(
value: 0, duration: const Duration(seconds: 1), vsync: this);
controller.animateTo(1, curve: Curves.linear);
super.initState();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return SizedBox(height: 200 * controller.value, child: widget.child);
});
}
}
I have tried using a global key to get the size of the spacer and detect after rebuilds whether the spacer has been sized to 0, and if so, re-build the entire widget as a list view (without the spacer) instead of a column. You also need to listen in that case for if the size shrinks and it needs to become a column again, it seemed to make the performance noticeably worse, it was tricky to save the state when switching between column/listview, and it seemed not the best way to solve the problem.
Any ideas?
Try implementing this solution I've just created without the animation you have. Is a scrollable area at the top and a persistent footer.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
home: SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("My AppBar"),
),
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
// Your scrollable widgets here
Container(
height: 100,
color: Colors.green,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.red,
),
],
),
),
),
Container(
child: Text(
'Your footer',
),
color: Colors.blueGrey,
height: 200,
width: double.infinity,
)
],
),
),
),
);
}
}
I am using the persistent_bottom_nav_bar package and have implemented its custom navigation bar (basically just customized from the example in their Readme page). Reproducible code below.
The issue: when you navigate with the bottom navigation, ALL the pages rebuild on every tap. Quite draining on the app's performance! This seems to be a Flutter issue in general and solutions are given by using e.g. an IndexedStack when the full code is written by oneself instead of using a package, which I have done.
Is there any way to fix this issue when using the persistent_bottom_nav_bar package and specifically with the custom code that I have used?
My code (simplified so that anyone can just copy & run it):
main.dart
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
import 'page1.dart';
import 'page2.dart';
import 'page3.dart';
import 'page4.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
home: HomeScaffold(),
);
}
}
class HomeScaffold extends StatefulWidget {
#override
_HomeScaffoldState createState() => _HomeScaffoldState();
}
class _HomeScaffoldState extends State<HomeScaffold> {
PersistentTabController _controller;
#override
void initState() {
super.initState();
_controller = PersistentTabController(initialIndex: 0);
}
List<Widget> _buildScreens() {
return [
Page1(),
Page2(),
Page3(),
Page4(),
];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
_buildBottomNavBarItem('Page 1', Icons.home),
_buildBottomNavBarItem('Page 2', Icons.search),
_buildBottomNavBarItem('Page 3', Icons.message),
_buildBottomNavBarItem('Page 4', Icons.settings),
];
}
#override
Widget build(BuildContext context) {
return PersistentTabView.custom(
context,
controller: _controller,
screens: _buildScreens(),
confineInSafeArea: true,
itemCount: 4,
handleAndroidBackButtonPress: true,
stateManagement: true,
screenTransitionAnimation: ScreenTransitionAnimation(
animateTabTransition: true,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
),
customWidget: CustomNavBarWidget(
items: _navBarsItems(),
onItemSelected: (index) {
setState(() {
_controller.index = index;
});
},
selectedIndex: _controller.index,
),
// ),
);
}
}
class CustomNavBarWidget extends StatelessWidget {
final int selectedIndex;
final List<PersistentBottomNavBarItem> items;
final ValueChanged<int> onItemSelected;
CustomNavBarWidget({
Key key,
this.selectedIndex,
#required this.items,
this.onItemSelected,
});
Widget _buildItem(PersistentBottomNavBarItem item, bool isSelected) {
return Container(
alignment: Alignment.center,
height: kBottomNavigationBarHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: IconTheme(
data: IconThemeData(
size: 26.0,
color: isSelected
? (item.activeColorSecondary == null
? item.activeColorPrimary
: item.activeColorSecondary)
: item.inactiveColorPrimary == null
? item.activeColorPrimary
: item.inactiveColorPrimary),
child: isSelected ? item.icon : item.inactiveIcon ?? item.icon,
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Material(
type: MaterialType.transparency,
child: FittedBox(
child: Text(
item.title,
style: TextStyle(
color: isSelected
? (item.activeColorSecondary == null
? item.activeColorPrimary
: item.activeColorSecondary)
: item.inactiveColorPrimary,
fontWeight: FontWeight.w400,
fontSize: 12.0),
)),
),
)
],
),
);
}
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items.map((item) {
int index = items.indexOf(item);
return Flexible(
child: GestureDetector(
onTap: () {
this.onItemSelected(index);
},
child: _buildItem(item, selectedIndex == index),
),
);
}).toList(),
),
),
);
}
}
PersistentBottomNavBarItem _buildBottomNavBarItem(String title, IconData icon) {
return PersistentBottomNavBarItem(
icon: Icon(icon),
title: title,
activeColorPrimary: Colors.indigo,
inactiveColorPrimary: Colors.grey,
);
}
try AutomaticKeepAliveClientMixin, this won't refresh page while change tab:
1.
class PageState extends State<Page> with AutomaticKeepAliveClientMixin {
#override
bool get wantKeepAlive => true;
#override
Widget build(BuildContext context) {
super.build(context);
I have file.a which contains an array:
final _likes = <String>[];
Based on answers selected by the user, items are added to this array.
I want to then be able to, at the press of a button, display the items in the array to the user.
The issue is that the button I want the users to press is defined in file.b (as the Icon is on the AppBar).
How can I give file.b the ability to see the variable _likes and access the data in it, when it lives in file.a?
file.a:
import 'package:flutter/material.dart';
import './main.dart';
class Images extends StatefulWidget {
#override
_ImagesState createState() => _ImagesState();
}
class _ImagesState extends State<Images> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
#override
// ignore: must_call_super
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
#override
dispose() {
_controller.dispose();
super.dispose();
}
int index = 0;
final likes = <String>[];
#override
Widget build(BuildContext context) {
_controller.forward();
return GestureDetector(
onHorizontalDragEnd: (DragEndDetails dragEndDetails) {
if (dragEndDetails.primaryVelocity == 0) return;
if (dragEndDetails.primaryVelocity.compareTo(0) == -1)
setState(() {
_controller.reset();
dateIdeas.removeAt(index);
});
else
setState(() {
_controller.reset();
likes.add(dateIdeas[index]['Description']);
dateIdeas.removeAt(index);
});
},
child: new Column(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: FadeTransition(
opacity: _animation,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.pink[200],
width: 7,
),
borderRadius: BorderRadius.circular(9),
),
child: new Container(
child: new Image.asset(dateIdeas[index]['Image']),
),
),
),
),
Container(
alignment: Alignment.topCenter,
child: Text(dateIdeas[index]['Description'],
style: TextStyle(
fontSize: 30,
color: Colors.black,
fontFamily: 'IndieFlower',
)),
),
],
),
],
)
],
),
);
}
}
file.b:
import 'package:flutter/material.dart';
import './surprises.dart';
import './images.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SO Surprises',
theme: ThemeData(
primaryColor: Colors.pink[200],
),
home: MyHomePage(title: ''),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
{
int ideaCount = 1;
int _swipeCount = 0;
void _swipe() {
setState(() {
_swipeCount++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
Container(
height: 150,
width: 150,
child: IconButton(
icon: Image.asset('assets/images/SO.png'),
padding:
const EdgeInsets.only(right: 40.0, top: 10, bottom: 10.0),
),
),
GestureDetector(
onTap: () => print(Images.likes),
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Icon(
Icons.star,
color: Colors.white,// add custom icons also
),
),
),
],
),
body: _swipeCount == 0
? Stack(
children: <Widget>[
GestureDetector(
onHorizontalDragEnd: (DragEndDetails dragEndDetails) {
if(dragEndDetails.primaryVelocity == 0) return;
_swipe();
},
child: Container(
color: Colors.transparent,
alignment: Alignment.center,
child: Text("Swipe to get started! $_swipeCount"),
),
),
],
)
: Template(),
);
}
}
By prefixing your likes list with an underscore (_), it means you are making that method only accessible inside the class it belongs too.
To be able to use the method in other parts of your program, remove the underscore(_).
After removing the _, you are making the likes list accessible from other parts of your code.
I create a loading dialog and put it in StreamBuilder. At the same time, there is a method named _loadingText as the dialog parameter. When I click the 'Go Run' button, the _loadingText method is called twice.
As the same way, I used the flutter build-in dialog showAboutDialog, everything is OK.
If I remove the StreamBuilder, the _loadingText is called once too.
It takes me one day!!!
Any help is appreciated. Thanks in advance...
main.dart:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:view_animation/loading_dialog.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, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
StreamController<String> _streamController;
TextEditingController _inputController;
#override
void initState() {
super.initState();
_streamController = StreamController<String>.broadcast();
_inputController = TextEditingController();
_inputController.addListener(() {
_streamController.add(_inputController.text);
});
}
#override
void dispose() {
super.dispose();
_streamController.close();
}
String _loadingText() {
print('===== 2. Method run OVER =====');
return 'Loading...';
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_inputContainer(),
SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(26),
),
child: StreamBuilder(
stream: _streamController.stream.map((text) => text.length > 4),
builder: (context, snap) {
return FlatButton(
color: Color(0xFFFFAC0B),
disabledColor: Colors.black12,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(26),
),
padding: EdgeInsets.symmetric(vertical: 15, horizontal: 12.5),
onPressed: snap.data != null && snap.data
? () {
print('===== 1. show dialog =====');
showDialog(
context: context,
builder: (BuildContext context) {
return LoadingDialog(
loadingText: _loadingText(),
);
});
// showAboutDialog(context: context, applicationName: _loadingText());
}
: null,
child: Text(
'GO RUN',
style: TextStyle(fontSize: 12, color: Colors.white),
),
);
},
),
),
],
)),
);
}
Widget _inputContainer() {
return Container(
width: 200,
padding: EdgeInsets.only(left: 20, right: 20),
decoration: BoxDecoration(
color: Color(0xFFFFAC0B),
borderRadius: BorderRadius.circular(36.0),
),
child: TextField(
controller: _inputController,
keyboardType: TextInputType.number,
maxLines: 1,
cursorColor: Colors.orange,
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Let's GO",
hintStyle: TextStyle(color: Colors.white54, fontSize: 20),
),
),
);
}
}
loading_dialog.dart
import 'package:flutter/material.dart';
class LoadingDialog extends StatefulWidget {
final String loadingText;
final bool outsideDismiss;
final Function dismissCallback;
final Future<dynamic> requestCallback;
LoadingDialog(
{Key key,
this.loadingText = "Loading...",
this.outsideDismiss = true,
this.dismissCallback,
this.requestCallback,
})
: super(key: key);
#override
_LoadingDialogState createState() => _LoadingDialogState();
}
class _LoadingDialogState extends State<LoadingDialog> {
void _dismissDialog(){
if(widget.dismissCallback != null) {
widget.dismissCallback();
}
Navigator.of(context).pop();
}
#override
void initState() {
print('===== 3. loading init =====');
if (widget.requestCallback != null) {
widget.requestCallback.then((_) => Navigator.of(context).pop());
}
super.initState();
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: widget.outsideDismiss ? _dismissDialog : null,
child: Material(
type: MaterialType.transparency,
child: Center(
child: SizedBox(
width: 120.0,
height: 120.0,
child: Container(
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
widget.loadingText,
style: new TextStyle(fontSize: 12.0),
),
),
],
),
),
),
),
),
);
}
}
log gif here
That's because when you tap on button first time your TextField is still active that means new state comes and flutter rebuilds itself. When you tap on button second your Textfield is inactive.
The points are when you pass the function to the onTap widget it's going to execute when it building state and calling a function without tapping on it:
So instead of a passing method to the OnTap, try something like this:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () widget.outsideDismiss ? ()
{
this._dismissDialog();
} : null,
...