I'm going to use a data table in my application.
In my page I have a background that this data table should be in a specific position (center maybe), but I don't know how to set alignment for that (data table).
Can anyone tell me how to solve this issue?
To align your text vertically in a table row you can wrap you Conent with TableCell and set the vertical Alignment parameter:
return TableRow(children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.all(10),
child: Text('Hello World'),
),
),
child: Table(
children: [
TableRow(children: [
Center(child: Text("item 1"),),
Center(child: Text("item 2"),),
Center(child: Text("item 3"),),
Center(child: Text("item 4"),),
Center(child: Text("Edit"),),
]),
Working.
import 'package:flutter/material.dart';
void main() => runApp(new Demo());
class Demo extends StatefulWidget {
#override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> with TickerProviderStateMixin {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: new Text("table demo"),
),
body: new Container(
child: Center(
child: new Table(
children: const <TableRow>[
TableRow(
children: <Widget>[
Center(child: Text('AAAAAA')), Center(child: Text('B')), Center(child: Text('C')),
],
),
TableRow(
children: <Widget>[
Center(child: Text('BBBB')), Center(child: Text('AAAAAA')), Center(child: Text('vdsvsdvs')),
],
),
TableRow(
children: <Widget>[
Center(child: Text('CCCCCC')), Center(child: Text('F')), Center(child: Text('CG')),
],
),
],
),
),
)
)
);
}
}
Related
How to make the children in the stack equal in height in flutter? The container below is the automatic height, I need to set the height of the upper container according to the height of the lower container.
Why do I need this？
Because I want to implement a background progress bar.
return Stack(
children: [,
Container(
//how to auto set this widget equal height to below.
height:?
),
Container(
child: Column(
children: [
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
);
Just wrap your Stack widget with IntrinsicHeight widget.
This will make each of the children of the Stack widget occupy the height of the largest child. So. all children will be of equal height.
As per the example you shared:
return IntrinsicHeight(
child: Stack(
children: [,
Container(
child: SomeWidget(),
),
Container(
child: Column(
children: [
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
)
);
I found the solution based on #JaisonThomas' comment.
return Stack(
children: [
Positioned.fill(
child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
return Container(
child: Row(
children: [
Container(
width: constraints.maxWidth * _progress,
color: statusColor,
),
],
),
);
}),
),
Container(
child: Column(
children: [
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
);
Although there is a good solution that made by 'noveleven',
I implemented by using 'addPostFrameCallback' and 'key'.
(I added a background color for distinguish Widget.)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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> {
GlobalKey _key = GlobalKey();
double _sizeOfColumn = 0.0;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
_sizeOfColumn = _key.currentContext.size.height;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Stack(
children: [
Container(
color: Colors.grey,
height: _sizeOfColumn,
),
Container(
key: _key,
color: Colors.yellow,
child: Column(
mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("a"),
Text("b"),
Text("c"),
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
);
}
}
I am trying to show snackbar on button click but due to some reasons facing an error message below.
Unhandled Exception: Scaffold.of() called with a context that does not
contain a Scaffold.
Am I missing anything?
Code
class SignIn extends StatefulWidget {
#override
_SignInState createState() {
return _SignInState();
}
}
class _SignInState extends State<SignIn> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Hello",
home: Scaffold(
body: Center(
child: ListView(shrinkWrap: true, children: <Widget>[
Center(
child: Form(
key: _formKey,
child: Column(children: <Widget>[
Container(
child: Column(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
ElevatedButton(
child: Text("Login"),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text("Hello there!"),
),
);
})
],
),
)
],
),
)
]),
))
]))));
}
}
Use Scaffold key for showing snackbar.
class SignIn extends StatefulWidget {
#override
_SignInState createState() {
return _SignInState();
}
}
class _SignInState extends State<SignIn> {
final _formKey = GlobalKey<FormState>();
final _scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Hello",
home: Scaffold(
key: _scaffoldKey,
body: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Center(
child: Form(
key: _formKey,
child: Column(children: <Widget>[
Container(
child: Column(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
ElevatedButton(
child: Text("Login"),
onPressed: () async {
_scaffoldKey.currentState.showSnackBar(
SnackBar(
content: Text("Hello there!"),
),
);
})
],
),
)
],
),
)
]),
),
),
],
),
),
),
);
}
}
Try
Material App (home: NewWidget())
In which the
NewWidget();
is a stateless or stateful widget that returns Scaffold
Create a new widget and paste all the code from Scaffold. Then return the widget at home:
I would like to include buttons between AppBar and ListView. In the example below, the buttons scroll along with the text. I tried to include the SingleChildScrollView within a Column, but was unsuccessful.
I read that the Column widget does not support scrolling. I already searched a lot, but I didn't find an example similar to what I need.
Can someone help me?
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('A Idade do Lobo'),
elevation: 0.0,
backgroundColor: COLOR_MAIN,
),
body: NotificationListener(
onNotification: (notif) {
if (_hasScroll) {
if (notif is ScrollEndNotification && scrollOn) {
Timer(Duration(seconds: 1), () {
_scroll();
setState(() {
_controlButton();
});
});
}
}
return true;
},
child: SingleChildScrollView(
controller: _scrollController,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Center(
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
onPressed: _showScrollPickerDialog,
child: Text('Rolagem ${_scrollSpeed}'),
),
new RaisedButton(
onPressed: _showTomPickerDialog,
child: Text('TOM ${_tom}'),
),
],
),
),
new Flexible(
fit: FlexFit.loose,
child: new ListView.builder(
shrinkWrap: true,
itemCount: _songDetails.length,
itemBuilder: (context, index) {
return new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: new EdgeInsets.all(5.0),
child: new RichText(
text: TextSpan(children: [
new TextSpan(
text: '${_songDetails[index].line}',
style: _getStyle(
_songDetails[index].type,
),
),
]),
),
),
],
);
},
),
),
],
),
),
),
floatingActionButton: _controlButton(),
);
}
}
You can use bottom properly of AppBar to achieve desire UI.
Following example clear your idea.
import 'package:flutter/material.dart';
class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
#override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("your title"),
bottom: PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width, 40),
child: Center(
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
onPressed: () {},
child: Text('Rolagem '),
),
new RaisedButton(
onPressed: () {},
child: Text('TOM '),
),
],
),
),
),
),
body: Container(
child: ListView.builder(
itemBuilder: (context, int index) {
return Text(index.toString());
},
itemCount: 100,
),
));
}
}
Whenever I try to set up a CupertinoPicker in a ModalBottomSheet in a Column, Row, or in a Container it seems to occupy the maximum possible place.
Is there anyway to limit the size/heigt of the ModalBottomSheet to the actual size of the CupertinoPicker, which is obviously much smaller in height than the ModalBottomSheet (as becomes apparent through its grey background color).
Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(body:
Center(child: RaisedButton(onPressed: () => showPicker(context),
child: Text('Show Bottom Sheet')),)
);
}
Widget showPicker(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('This is a picker'),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Container(
height: 100,
child: CupertinoPicker(
itemExtent: 30,
onSelectedItemChanged: (int index) {
print(index);
},
children: <Widget>[
Center(child: Text("Item 1")),
Center(child: Text("Item 2")),
Center(child: Text("Item 3")),
],
),
),
),
],
),
),
],
),
);
});
}
}
This is what I get:
Thank you for any tips, hints and advice!
Widget showPicker(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('This is a picker'),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Container(
height: 100,
child: CupertinoPicker(
itemExtent: 30,
onSelectedItemChanged: (int index) {
print(index);
},
children: <Widget>[
Center(child: Text("Item 1")),
Center(child: Text("Item 2")),
Center(child: Text("Item 3")),
],
),
),
),
],
),
],
),
);
});
}
This can solve the issue paste the method, you will get your desired output
My goal is to add a tab inside a colum, and add more widgets on this column.
But when i'm adding a tab, i'm getting an error of
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to
match their extent in the cross axis. In this case, a horizontal viewport was given an
unlimited amount of vertical space in which to expand.
Any suggestions what i'm doing wrong? Thanks!
Here is my sample code
import 'package:flutter/material.dart';
import 'package:trip_finder/screens/home_screen.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: 'Trip Finder',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Color(0xFF131415),
primaryColorLight: Color(0xFF8296ab),
highlightColor: Color(0xFF47bee1),
scaffoldBackgroundColor: Color(0xFFf0f1f1)
),
// home: HomeScreen(),
home: TestScreen(),
);
}
}
class TestScreen extends StatefulWidget {
#override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_tabSection(),
],
),
)
);
}
}
Widget _tabSection() {
return DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
),
Container(
child: TabBarView(children: [
Container(
child: Text("Home Body"),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
]),
),
],
),
);
}
You can add height to your TabBarView. Code:
import 'package:flutter/material.dart';
class TestScreen extends StatefulWidget {
#override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_tabSection(context),
],
),
));
}
}
Widget _tabSection(BuildContext context) {
return DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
),
Container(
//Add this to give height
height: MediaQuery.of(context).size.height,
child: TabBarView(children: [
Container(
child: Text("Home Body"),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
]),
),
],
),
);
}
You can also wrap inside Flexible.
Flexible(
child: Container(
child: TabBarView(
children: [
Container(
child: Text("Home Body"),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
],
),
),
)