I have this class, taken and changed from one of the examples
class SignUpView extends StatelessWidget {
const SignUpView({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
width: 400,
child: Card(
child: SignUpForm(),
),
),
),
);
}
}
But if I want to put children , instead of child, like this
class SignUpView extends StatelessWidget {
const SignUpView({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
children: [
SizedBox(
width: 400,
child: Card(
child: SignUpForm(),
),
),
],
),
);
}
}
It says The named parameter children isn't defined.
What if I want to put more than one child in the Center container?
Center can only have a single child. Use something like Column, Row, or a ListView to use more than 1 widget for Center.
import 'package:flutter/material.dart';
class SignUpView extends StatelessWidget {
const SignUpView({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ListView(
children: [
SizedBox(
width: 400,
child: Card(
child: SignUpForm(),
),
),
],
),
),
);
}
}
Related
I have created a customWidget for showing data named CustomShowDataWidget, and this widget is used in many screens but with different available heights.. so how to apply height based on available screen height...
here is my custom widget
class ShowTransactionWidget extends StatelessWidget {
ShowTransactionWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 500,//-< I have given fixed height what I dont want...
color: Colors.grey.shade200,
child: Column(
children: [
Align(
child: Text('Recent Transactions',style: TextStyle(
color: Colors.blue,
fontSize: 20
),),
alignment: Alignment.centerLeft,
),
Expanded(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context,index){
return ListTile(
title: Text('Hello $index'),
);
}),
)
],),
);
}
}
here is the one of the screen where I am using this widget
class NextScreen extends StatelessWidget {
const NextScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(children: [
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height*0.70,
),
ShowTransactionWidget(),
],),
);
}
}
Try the following code:
class ShowTransactionWidget extends StatelessWidget {
const ShowTransactionWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
color: Colors.grey.shade200,
child: Column(
children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
"Recent Transactions",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
),
Expanded(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return const ListTile(
title: Text("Hello"),
);
},
),
)
],
),
),
);
}
}
ShowTransactionWidget(),
You want your widget ShowTransactionWidget to have a height which is relative to the available height given to it.
Okay, first, you must learn that in flutter, Constraints go down. Sizes go up. Parent sets position. So if your widget can be a part of other widgets, don't always expect it can take the size you want it to take.
After you learn that, you have multiple options:
Use LayoutBuilder widget to wrap your Container. This widget will give you the available constraints to your widget, and you can use the max height to determine the height of your widget.
class ShowTransactionWidget extends StatelessWidget {
ShowTransactionWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final maxHeight = constraints.maxHeight;
return Container(
height: maxHeight/2,
...
Use the MediaQuery to get the size inside your ShowTransactionWidget, but you may want more information than the size of the screen as your widget might not be allowed to have the whole size of the screen, so this option might not fit all cases.
class ShowTransactionWidget extends StatelessWidget {
ShowTransactionWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size; // The size of the media in logical pixels (e.g, the size of the screen).
return Container(
height: size.height/2,
...
Pass the max height to your ShowTransactionWidget in its constructor, and then define the height of the Container relative to that height
class ShowTransactionWidget extends StatelessWidget {
final double height;
ShowTransactionWidget({Key? key, required this.height}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: height, // passed from parent, this method of passing the height is useful when your child's height is always determined by the parent's height
...
Use more complex widgets like CustomSingleChildLayout.
I want to create a flutter UI where there are some shapes like square, rectangle, circle, arrow. And I must be able to drag and drop them at the centre and add text to it and connect them. I have just started with flutter so I am not sure how to do this. Can anyone please help me?
Use Draggable class
Example:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int acceptedData = 0;
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Draggable<int>(
// Data is the value this Draggable stores.
data: 10,
feedback: Container(
color: Colors.deepOrange,
height: 100,
width: 100,
child: const Icon(Icons.directions_run),
),
childWhenDragging: Container(
height: 100.0,
width: 100.0,
color: Colors.pinkAccent,
child: const Center(
child: Text('Child When Dragging'),
),
),
child: Container(
height: 100.0,
width: 100.0,
color: Colors.lightGreenAccent,
child: const Center(
child: Text('Draggable'),
),
),
),
DragTarget<int>(
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return Container(
height: 100.0,
width: 100.0,
color: Colors.cyan,
child: Center(
child: Text('Value is updated to: $acceptedData'),
),
);
},
onAccept: (int data) {
setState(() {
acceptedData += data;
});
},
),
],
);
}
}
I try to make a list of widget. It look like this:
I know of no such thing as Constraint Layout in flutter. But I need something to position my arrow icon in a fixed position on the right. To put it simple, this is my widget code:
Row(
children:[
SizedBox(),
Column(),//this is all the item on the left
Spacer(),
Expanded(// this is the heart and arrow button
child: Column()
)
]
)
I notice that if my column on the left get too wide, my arrow and heart icon is shifted out of line.
How to put my icon in fixed position to the right?
here try this, You have to wrap middle column with expanded so it will take the maximum space available
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: MyStatefulWidget(),
),
),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool isChecked = false;
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (_, index) => Container(
padding: EdgeInsets.all(15),
margin: EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),border: Border.all(width: 1.5)),
child: Row(
children: [
Container(
width: 25,
height: 40,
color: Colors.black,
),
Expanded(
child: Column(children: [
//put your children here
]),
),
//this will be always on right
Column(
children: [
Icon(Icons.heart_broken),
Icon(Icons.chevron_right),
],
)
],
),
),
);
}
}
How to align/move a DefaultTabController to be side by side in Flutter? Like this. When I try to do this, the widget deploys in the center
as an option:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Home'),
bottom: TabBarWrapper(
tabBar: TabBar(
tabs: [
Tab(child: Text('Programs')),
Tab(child: Text('Bookings')),
],
),
child: RightSideWidget(),
),
),
),
),
);
}
}
class TabBarWrapper extends StatelessWidget implements PreferredSizeWidget {
final PreferredSizeWidget tabBar;
final Widget child;
const TabBarWrapper({required this.tabBar, required this.child, Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: [
IntrinsicWidth(child: tabBar),
Expanded(child: child),
],
);
}
#override
Size get preferredSize => tabBar.preferredSize;
}
class RightSideWidget extends StatelessWidget {
const RightSideWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Icon(Icons.qr_code, color: Colors.white, size: 20),
Padding(
padding: const EdgeInsets.only(left: 8, right: 16),
child: Text(('Scan'), style: TextStyle(color: Colors.white)),
),
],
);
}
}
I am trying to figure out why the drawer widget is not rendered in my Flutter Web page.
import 'package:responsive_builder/responsive_builder.dart';
class HomeLayout extends StatelessWidget {
const HomeLayout({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ResponsiveBuilder(
builder: (context, sizingInformation) => Scaffold(
drawer: sizingInformation.deviceScreenType == DeviceScreenType.desktop
? null
: NavigationDrawer(),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: <Widget>[
NavigationBar(),
Expanded(
child: Navigator(
key: locator<NavigationService>().navigatorKey,
onGenerateRoute: generateRoute,
initialRoute: HomeRoute,
),
)
],
),
),
),
);
}
...
class NavigationDrawer extends StatelessWidget {
const NavigationDrawer({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: SizedBox.shrink(),
decoration: BoxDecoration(
color: Color(0xff2acccc),
),
),
DrawerItem('Login', LoginToAdmin),
],
),
);
}
}
...
class NavigationBar extends StatelessWidget {
const NavigationBar({ Key key }) : super(key: key);
#override
Widget build(BuildContext context) {
return ScreenTypeLayout(
mobile: NavigationBarMobile(),
tablet: NavigationBarTabletDesktop(),
);
}
}
...
class NavigationBarMobile extends StatelessWidget {
const NavigationBarMobile({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 80,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
)),
Expanded(
child: NavBarLogo(),
),
Expanded(
child: SizedBox.shrink(),
),
],
),
);
}
}
I am trying out Flutter Web, and run the project with "flutter run -d chrome"
When I click on the burger menu nothing happens, apart from the ripple effect.
I am pretty sure I am doing something wrong in my ResponsiveBuilder() widget, but what that is, is not clear to me.
this incredible pen demonstrates that it should work codePen
Any help will be much appreciate
You'll need to add an AppBar() to your Scaffold() for the drawer to be visible, similar to the following:
return Scaffold(
drawer: const MyDrawer(),
appBar: AppBar(
title: const Text('Hello'),
));