I have the following code for the TabBar page:
class HomePage extends StatefulWidget {
static String tag = 'home-page';
#override
_homepage createState() => new _homepage();
}
class _homepage extends State<HomePage> with TickerProviderStateMixin{
AnimationController percentageAnimationController;
TabController _tabController;
#override
void initState() {
_tabController = new TabController(length: 3, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: new Material(
color: Colors.white,
child: new TabBar(
controller: _tabController,
indicatorColor: Theme.Colors.loginGradientStart,
labelColor: Theme.Colors.loginGradientStart,
tabs: <Widget>[
new Tab(
icon: new Icon(wind_icon),
),
new Tab(
icon: new Icon(chart_icon),
),
new Tab(
icon: new Icon(settings_icon),
),
]
),
),
body:
new TabBarView(
children: <Widget>[
TabOne(),
TabTwo(),
TabThree(),
],
controller: _tabController,
),
);
}
}
Now if I navigate to this page it automatically opens the first tab but I want to open the second tab instead of the first i.e. tab index 1.
I am able to find out that we can achieve this by using _tabController.animateTo(1);
but I want to know how can I do this from button press of other pages.
You can Use Initial Index:
_tabController = new TabController(length: 3, vsync: this, initialIndex: 1);
I had similar problem. I created a file named "globals.dart".
my_app/globals.dart
library my_app.globals;
import 'package:flutter/material.dart';
TabController tabController;
And, after you set the tab controller, copy reference to this.
_homepage Class
import 'package:my_app/globals.dart' as globals;
#override
void initState() {
_tabController = new TabController(length: 3, vsync: this);
globals.tabController = _tabController;
super.initState();
}
other_page Class
import 'package:my_app/globals.dart' as globals;
...(in any function you want)...
globals.tabController.animateTo(2);
At this moment, if you don't need to expose the controller for other reasons and are using DefaultTabController, you can use the class initialIndex property :
DefaultTabController(
length: 3,
initialIndex: 1,
child: ...
You can check a DartPad demo here
Related
I am using an HtmlElementView in my flutter web project for showing a web image/pdf etc.
I am not able to figure out a way to align the element within the frame. As shown by the below sample code example, if the image size is smaller than parent widget size, it is shown in top left alignment. I have a feeling this has to do with some iframe style setting but not able to figure out.
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
theme: ThemeData.dark(),
home: Home(),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: InteractiveViewer(
child: Container(
alignment: Alignment.center,
width: 3000,
height: 3000,
child: EmbedWebView(
src:
'https://picsum.photos/id/1/200/300', //'https://www.youtube.com/embed/3fB1mxOsqJE',
width: 500,
height: 550))),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
);
}
}
class EmbedWebView extends StatefulWidget {
final Key? key;
final String src;
final double height, width;
EmbedWebView(
{this.key, required this.src, required this.height, required this.width});
#override
State<StatefulWidget> createState() {
return EmbedWebViewState();
}
}
class EmbedWebViewState extends State<EmbedWebView>
with AutomaticKeepAliveClientMixin {
#override
void initState() {
super.initState();
final IFrameElement _iframeElement = IFrameElement()
..height = '100%'
..width = '100%'
..src = widget.src
..style.border = 'none'
..style.overflow = "hidden"
..allow = "autoplay"
..allowFullscreen = true;
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
widget.src,
(int viewId) => _iframeElement,
);
}
#override
void dispose() {
super.dispose();
}
#override
bool get wantKeepAlive => true;
#override
Widget build(BuildContext context) {
super.build(context);
return Center(
child: Container(
color: Colors.white,
width: widget.width,
height: widget.height,
child: HtmlElementView(
// key: UniqueKey(),
viewType: widget.src,
),
),
);
}
}
When the above code is run using flutter run -d chrome, this is what I get. It can be seen that the image in not centred.
sample code output
Try wrapping the EmvedWebView with an Expanded. Probably the EmvedWebView is not occupying the whole Container, implying that even if the Container is centered his child is not
I am trying to call a custom widget that has a function as a parameter, however I got no clue what parameter I could assign to it. I have tested all the ideas I came up with but with no success. The idea for this, I have gained from a tutorial, however I have done some things differently, as I have different requirements.
This is my code:
import 'package:flutter/material.dart';
class NewTransaction extends StatelessWidget {
final Function addTx;
const NewTransaction({Key? key, required this.addTx}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text('I cant solve this problem');
}
}
========================================================================
import 'package:flutter/material.dart';
import 'package:function_parameter_problem/new_transaction.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: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
NewTransaction(
addTx:
addTx), // What parameter can/should I pass here? It is crucial for my project
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Edit: Okay, but let's say that the NewTransaction() function returnes a scaffold with appbar, etc and I have to call it again, however in the following scenario:
_wykonajZapytanie() { //function called onPressed in the main window
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewTransaction()),
); /*I have to put a parameter here, but I just want to display another window, I don't know why, but I just can't get any ideas*/
}
IMPORTANT TO NOTICE In the original project, if it comes to the first example I have provided, I do not call NewTransaction(addTx...) in the main class, but in the UserTransaction class.
tldr I need to assemble an expandable list in the main class - which can be done the way below from what I know, but also I need to call this function in the the main class on the onPressed of a button to display all of the textfields, etc.
import 'package:flutter/material.dart';
import './new_transaction.dart';
import './transaction_list.dart';
import '../models/transaction.dart';
class UserTransaction extends StatefulWidget {
#override
_UserTransactionState createState() => _UserTransactionState();
}
class _UserTransactionState extends State<UserTransaction> {
final List<Transaction> _userTransactions = [
Transaction(
id: 1,
date: DateTime.now(),
numTel: 911911911,
// scoring: 'Link wygasł',
user: 'Polizei pau pau'),
Transaction(
id: 2,
date: DateTime.now(),
numTel: 911911911,
// scoring: 'Link wygasł',
user: 'Tha police')
];
void _addNewTransaction(int txNumTel, /* String txScoring,*/ String txUser) {
final newTx = Transaction(
numTel: txNumTel,
/*scoring: txScoring,*/
user: 'PLZ WORK',
date: DateTime.now(),
id: 3,
);
setState(() {
_userTransactions.add(newTx);
});
}
#override
Widget build(BuildContext context) {
return Column(children: <Widget>[
NewTransaction(_addNewTransaction),
]);
}
}
import 'package:flutter/material.dart';
class NewTransaction extends StatelessWidget {
final VoidCallback function;
//if nothing returns
//else typedef CustomFunc = Function(int param); (replace int with your data type)
const NewTransaction({Key? key, required this.function}) : super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
child: Text('I cant solve this problem'),
onTap:function,
//if custom
//onTap: (){
// function(params);
//}
);
}
}
Call like below...
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
NewTransaction(
function: (){
//todo
},
//if custome function: (params){ todo },
)
],
),
),
If I understood your question correctly, this is the way you can pass a function with parameters:
import 'package:flutter/material.dart';
class NewTransaction extends StatelessWidget {
final Function() addTx;
const NewTransaction({Key? key, required this.addTx}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text('I cant solve this problem');
}
}
When passing this Function, make sure to pass it like this: NewTransaction(addTx: () => addTx());. If you pass it like this: NewTransaction(addTx: addTx()); the function gets called instantly.
When you sayFunction addTx it means any function can be passed.
If Function() addTx it means function with no parameter.
If Function(int) addTx it means function with one required positional parameter integer.
If void Function() addTx it means function with no parameter and return type should be void.
In flutter you can also use
VoidCallback which is basically void Function() written like this
final VoidCallback addTd.
.
or can use ValueChanged<T> which is basically void Function(T value)
More info at:
https://dart.dev/guides/language/language-tour#functions
I'm trying to create a form with tabs. In each tab I have TextFormField. Tabs have AutomaticKeepAliveClientMixin to keep their State. Tabs can be created dynamically. When new tab is created, it is inserted in the middle of the tabs list.
Problem: when new tab is inserted, its TextFormField keep state of the next tab and so on. It seems states keeps in order from 1 to n. Is there any way to keep the right state for tabs?
Thanks in advance.
import 'package:flutter/material.dart';
class TabTesting extends StatefulWidget {
#override
_TabTestingState createState() => _TabTestingState();
}
class _TabTestingState extends State<TabTesting> with TickerProviderStateMixin {
List<MyTab> _tabs = [
MyTab(TabData("1", "1")),
MyTab(TabData("3", "3")),
];
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: _tabs.length);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TabTesting"),
bottom: TabBar(
controller: _tabController,
labelPadding: EdgeInsets.symmetric(vertical: 16.0),
tabs: _tabs.map((tab) => Text(tab.tabData.name)).toList(),
),
),
body: Container(
padding: EdgeInsets.all(32.0),
child: TabBarView(
controller: _tabController,
children: _tabs,
),
),
persistentFooterButtons: <Widget>[
RaisedButton(
child: Text("Add tab"),
onPressed: () {
final newTab = MyTab(TabData("2", "2"));
final newTabs = _tabs;
newTabs.insert(1, newTab);
final index = _tabController.index;
setState(() {
_tabs = newTabs;
_tabController = TabController(
vsync: this,
length: newTabs.length,
initialIndex: index);
});
},
),
],
);
}
}
class MyTab extends StatefulWidget {
final tabData;
MyTab(this.tabData);
#override
_MyTabState createState() => _MyTabState();
}
class _MyTabState extends State<MyTab> with AutomaticKeepAliveClientMixin {
#override
bool get wantKeepAlive => true;
#override
Widget build(BuildContext context) {
return Tab(
child: TextFormField(
decoration: InputDecoration(labelText: widget.tabData.name),
initialValue: widget.tabData.data,
),
);
}
}
class TabData {
String name;
String data;
TabData(this.name, this.data);
}
You forgot to add super.build(context); as the documentation of AutomaticKeepAliveClientMixin suggests.
#override
Widget build(BuildContext context) {
super.build(context);
return Tab(
child: TextFormField(
decoration: InputDecoration(labelText: widget.tabData.name),
initialValue: widget.tabData.data,
),
);
}
I have this a stateful widget which could be in two situations, the first one is a Container with a first text in it, for example, "Register", the second one is a different colored container with a different text, for example "confirm". The Problem is that the transition between these two situations is done using an animation and it's not an on-the-fly logic for example:
color: isSituation1 ? Colors.blue : Colors.red.
it's actually something like this:
color: Color.lerp(Colors.blue, Colors.red, _animation1.value)
and I have a function which runs when the user taps on the container which forwards the animation controller, like so:
_controller1.forward()
and this is a widget called let's say Button1
So in My HomePage stateful widget I have another button which should trigger the inverse process in the Button1 widget, so it would be:
_controller1.reverse()
I tried creating a function in the Button1 widget but then I cannot run it from outside. How could I do it if it's possible?
So basically you want to call methods of your CustomWidget from another widget. You can define ControllerClass that you will emit an instance when you create a new instance of your CustomWidget. This ControllerClass instance will hold the functions of your CustomWidget and you will be able to call them from outside.
By example a class that is a modal rounded progressbar that can be showed and hided from outise with a controller class. In this example a controller class is called ProgressBarHandler. I don't know if it is a better and the right approach but works.
class ModalRoundedProgressBar extends StatefulWidget {
final String _textMessage;
final double _opacity;
final Color _color;
final Function _handlerCallback;
ModalRoundedProgressBar({
#required Function handleCallback(ProgressBarHandler handler), //callback to get a controller
String message = "",
double opacity = 0.7,
Color color = Colors.black54,
}) : _textMessage = message,
_opacity = opacity,
_color = color,
_handlerCallback = handleCallback;
#override
State createState() => _ModalRoundedProgressBarState();
}
class _ModalRoundedProgressBarState extends State<ModalRoundedProgressBar> {
bool _isShowing = false;
#override
void initState() {
super.initState();
// init controller.
ProgressBarHandler handler = ProgressBarHandler();
handler.show = this.show;
handler.dismiss = this.dismiss;
widget._handlerCallback(handler); // callback call.
}
#override
Widget build(BuildContext context) {
if (!_isShowing) return Stack();
return Material(
color: Colors.transparent,
child: Stack(
children: <Widget>[
Opacity(
opacity: widget._opacity,
child: ModalBarrier(
dismissible: false,
color: Colors.black54,
),
),
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Text(widget._textMessage),
],
),
),
],
),
);
}
void show() {
setState(() => _isShowing = true);
}
void dismiss() {
setState(() => _isShowing = false);
}
}
class ProgressBarHandler {
Function show; // will point to widget show method
Function dismiss; // will point to another method.
}
// ...in another external widget you can do...
// ... code your things and:
var controller;
var progressBar = ModalRoundedProgressBar(
handleCallback: ((handler){ controller = handler; } ),);
//calling show method with controller
RaisedButton(
onPressed: () { controller.show(); }
);
//calling dismiss method with controller
RaisedButton(
onPressed: () { controller.dismiss(); }
);
It is possible, but you probably don't want to do that. You should either provide the AnimationController from the parent or structure your app to prevent such behaviors. Anyway, if you still want to go this way, here you have it.
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
VoidCallback _reverseAnimation;
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Reverse animation'),
onPressed: () => _reverseAnimation(),
),
Button1((controller) => _reverseAnimation = controller),
],
),
);
}
}
class Button1 extends StatefulWidget {
final ValueChanged<VoidCallback> callback;
Button1(this.callback);
_Button1State createState() => _Button1State();
}
class _Button1State extends State<Button1> with SingleTickerProviderStateMixin {
AnimationController _someAnimationController;
void _reverseAnimation() {
_someAnimationController?.reverse();
}
#override
void initState() {
super.initState();
if (widget.callback != null) {
widget.callback(_reverseAnimation);
}
}
#override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Text('Start animation'),
onPressed: () => _someAnimationController.forward(),
),
);
}
}
I'm trying to do what I think is a very simple Flutter app, but I can't figure out what's going wrong with my code.
I have a Flutter app with a Drawer widget. I'm using this widget to make a Navigation drawer, the Drawer has a ListView as a child and the ListView contains the View options (A, B and C) which the user can select.
Since the main page of the app (MyHomePage) extends from StatefulWidget the only thing that I do to load a new view is to call the setState method to assign the new value of my "control variable" (viewName), then I expect that Flutter executes the Widget build(BuildContext context) method of MyHomePage but with the new value of viewName this time.
All of the above works as expected, the problem with this is that in the body field of the Scaffold I have a TabBarView widget, since I want to show to the user a view with two tabs (Tab 1 and Tab 2) per each view (A, B and C).
The TabBarView children are:
-A StatefulTab object for Tab 1
-A simple Center widget for Tab 2
What I want to demonstrate here is that when you tap an option of the Drawer (Load the B view for example) the Tab 2 changes as a expected it's value, but the Tab 1 (that contains a stateful widget) not changes it's value when you tap any other option of the Drawer
Note: I must use the same StatefulTab widget for the 3 views in order to reuse the code, since the only value which changes for the 3 views is the viewName variable.
Here is the code:
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/StatefulTab.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(viewName: 'A'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.viewName}) : super(key: key);
final String viewName;
#override
_MyHomePageState createState() => new _MyHomePageState(viewName: viewName);
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
String viewName;
_MyHomePageState({Key key, this.viewName});
TabController controller;
#override
void initState() {
super.initState();
controller = new TabController(
length: 2,
vsync: this,
);
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
var tabs = <Tab>[
new Tab(icon: new Icon(Icons.home), text: 'Tab 1'),
new Tab(icon: new Icon(Icons.account_box), text: 'Tab 2')
];
return new Scaffold(
appBar: new AppBar(
title: new Text(viewName),
),
body: new TabBarView(controller: controller, children: <Widget>[
new StatefulTab(viewName: viewName),
new Center(child: new Text('This is the Tab 2 for view $viewName'))
]),
bottomNavigationBar: new Material(
color: Colors.blue,
child: new TabBar(controller: controller, tabs: tabs),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: 50.0),
),
new ClipRect(
child: new Column(
children: <Widget>[
new ListTile(
title: new Text('Tap to load view: A'),
onTap: () => _loadView('A', context),
),
new ListTile(
title: new Text('Tap to load view: B'),
onTap: () => _loadView('B', context),
),
new ListTile(
title: new Text('Tap to load view: C'),
onTap: () => _loadView('C', context),
),
],
),
),
],
),
),
);
}
_loadView(String view, BuildContext context) {
Navigator.of(context).pop();
setState(() {
if (view == 'A') {
viewName = 'A';
} else if (view == 'B') {
viewName = 'B';
} else if (view == 'C') {
viewName = 'C';
}
});
}
}
StatefulTab.dart
import 'package:flutter/material.dart';
class StatefulTab extends StatefulWidget {
String viewName;
StatefulTab({Key key, this.viewName}) : super(key: key);
#override
StatefulTabState createState() => new StatefulTabState(viewName: viewName);
}
class StatefulTabState extends State<StatefulTab> {
String viewName;
StatefulTabState({Key key, this.viewName});
#override
Widget build(BuildContext context) {
return new Center(
child: new Text('This is the Tab 1 for View $viewName'),
);
}
}
How can I tell Flutter that takes the new value for the stateful wdiget of the Tab 1?
Is there a better way to implement a Navigation drawer with dynamic views?
Thanks in advance!
I think I found your problem. You keep the viewName as State in your Homepage and additionally in the StatefulTab. This can't really work, because for the StatefulTab the state doesn't change only because the state of the HomePage changes. I came to that conclusion by inserting print statements in the two build methods. The build method of the HomePage acts according to your desired behavior (as you already saw in the header of the scaffold), but the build method of the StatefulTab kept its state.
Further investigating and various print statements in various places led me to the conclusion, that the constructor of the StatefulTabState is not called after one of the drawer buttons is clicked. Here is a working example of your StatefulTab:
class StatefulTab extends StatefulWidget {
String viewName;
StatefulTab({Key key, this.viewName}) : super(key: key);
#override
StatefulTabState createState() => new StatefulTabState();
}
class StatefulTabState extends State<StatefulTab> {
#override
Widget build(BuildContext context) {
return new Center(
child: new Text('This is the Tab 1 for View ${widget.viewName}'),
);
}
}
Don't hesitate to comment, if you have any questions. It may be beneficial for you to have a look at this tutorial/documentation.
For implement TabBar and drawer flutter provide us following widget.
1. TabController
2. TabBar
3. Drawer
I found a simple demo of TabBar and drawer.