I have 3 Rows and i want draw a picture as a line, please look at picture.
I tryed stack but dosent work for me
Try this code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Stack(
children: [
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(width: 60, height: 60, color: Colors.red),
Container(width: 60, height: 60, color: Colors.green),
Container(width: 60, height: 60, color: Colors.blue),
],
),
),
Center(
child: Container(
color: Colors.purple,
height: 10,
width: 200,
),
),
],
),
);
}
}
Result:
Live example: DartPad
Related
home: Scaffold(
backgroundColor: Colors.teal,
body: Column(
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
)
Container(
color: Colors.blue,
width: 100,
height: 100,
)
You have forgot to include , end of the Container
Scaffold(
backgroundColor: Colors.teal,
body: Column(
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
), //this
Container(
color: Colors.blue,
width: 100,
height: 100,
)
],
),
);
If you are using vs-code, try Error Lens extension
Since you have used home:Scaffold I believe you have a material app. If you had included const before the return Material app it will throw an error here.. also as #Yeasin Sheikh mentioned you have missed a , between Container widgets
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
),
Container(
color: Colors.blue,
width: 100,
height: 100,
)
],
),
));
}
}
I have a Column: child: Column( children: [ Container( height: 200, width: 300, color: Colors.red, ), Align( alignment: Alignment.bottomCenter, child: Text("This Product is Built By Imtiaz")), ], ),
I want to Expand Column to print Text At Bottom Of Screen
You could put a Spacer() between your Text widget and your Container widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
children: [
Container(
height: 200,
width: 300,
color: Colors.red,
),
Spacer(),
Text("This Product is Built By Imtiaz"),
],
),
),
),
);
}
}
In the following code, by uncommenting // return child; the Alignment works, but when wrapping child with Column we loose the Alignment
Why? and how to fix it?
import 'package:flutter/material.dart';
final 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 StatelessWidget {
#override
Widget build(BuildContext context) {
final child = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.topLeft,
child: Container(width: 100, height: 100, color: Colors.blue),
),
Container(width: 100, height: 500, color: Colors.red),
Align(
alignment: Alignment.center,
child: Container(width: 100, height: 300, color: Colors.green),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(width: 100, height: 200, color: Colors.yellow),
),
Container(width: 100, height: 100, color: Colors.purple),
],
);
// return child;
return Column(
children: [
child,
],
);
}
}
The code below will solve your problem. I just wrapped the 'child' widget with 'Expanded'.
import 'package:flutter/material.dart';
final 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 StatelessWidget {
#override
Widget build(BuildContext context) {
final child = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.topLeft,
child: Container(width: 100, height: 100, color: Colors.blue),
),
Container(width: 100, height: 500, color: Colors.red),
Align(
alignment: Alignment.center,
child: Container(width: 100, height: 300, color: Colors.green),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(width: 100, height: 200, color: Colors.yellow),
),
Container(width: 100, height: 100, color: Colors.purple),
],
);
// return child;
return Column(
children: [
Expanded(child: child,),
],
);
}
}
I want to add a scroll bar within a fixed size container in Flutter web as shown in the picture link below. Can anyone give me advice on this? I am stuck here. I have tried Single child scroll view with Flutter_web_scrollbar but it doesn't work. Here is the code.
Container(
width: 300,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _bcontroller,
child: Column(
children: [
Container(
width: 300,
child: Row(
children: [
Text(
'${eventList.length > 0 ? i['ShipName'] : ''}',
),
],
),
),
Container(
width: 300,
child: Row(
children: [
Text(
'${eventList.length > 0 ? i[getEventDesc()].toString() : ''}',
),
],
),
),
SizedBox(
height: 10,
),
],
),
),
)
Example
Wrap SingleChildScrollView with Scrollbar Widget.
import 'package:flutter/material.dart';
final 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 StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 200,
child: Scrollbar(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Container(
width: 300,
height: 100,
child: Row(
children: [
Text(
'your variable',
),
],
),
),
Container(
width: 300,
height: 100,
child: Row(
children: [
Text(
'your variable',
),
],
),
),
SizedBox(
height: 10,
),
],
),),
),
);
}
}
im trying to set 2 containers on top of each other. What I want is to showing a star and when user pressed the star I wanna open 5 star so he can vote . Im not really sure if im thinking the correct way . But fr that I wanna create one container and in another container directly above this stars container displaying all other buttons how's just buttons to clock normally . I hope that you understand what I trying to do. So when im putting the star container also in the same container they buttons when opening all stars the whole container will move isn't?
So heres im trying to do.
class VideoPage extends StatelessWidget {
static const route = '/Video';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 100,
color: Colors.yellow[300],
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(color: Colors.green[300]),
),
Container(
width: 100,
color: Colors.orange[300],
),
Container(
width: 100,
color: Colors.red[300],
),
],
),
),
Container(
height: 80,
color: Colors.blue[300],
),
],
),
);
}
}
This look like that:
And I want that the orange one is directly under the red one so there will be first one star and on pressing it open 5 stars . Is this possible what im trying ? If so please help . If not please help haha
What you need to use is the Stack Widget:
Stack(
children: <Widget>[
BottomWidget(),
MiddleWidget(),
TopWidget(),
],
),
The last widget of the children is the top layer, structure descending.
more info: https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77
EDIT:
In your case if you want the orange one underneath, you have to do some changes within your structure and split it from your Row()
Example
import 'package:flutter/material.dart';
final 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 StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 100,
color: Colors.yellow[300],
),
Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width *1,
height: 200,
color: Colors.orange,
),
Container(
height:200,
child: Row(
children: [
Expanded(
child: Container(color: Colors.green[300]),
),
Container(
width: 100,
color: Colors.red.withOpacity(0.5),
),
],
)),
],
),
Container(
height: 80,
color: Colors.blue[300],
),
],
),
);
}
}