英文:
How to set a max width for a material button in flutter on wider screens?
问题
我的材质按钮太大了，我需要一种方法来限制它们的最大宽度。我尝试了ContainedBox，但它在这里不起作用，以下是我的代码：
Container(
constraints: BoxConstraints(maxWidth: 200), // 这里设置最大宽度
margin: const EdgeInsets.only(left: 100.0, right: 100.0),
child: MaterialButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const RiderSignup()),
);
},
color: Colors.teal,
child: const Text("Rider Sign-up",
style: TextStyle(color: Colors.white)),
),
)
这是它的外观：
英文:
My Material buttons are too big and I need a way to give them a max width. I tried Contarinedbox and it does not work here is my code:
Container(
margin: const EdgeInsets.only(left: 100.0, right: 100.0),
child: MaterialButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const RiderSignup()),
);
},
color: Colors.teal,
child: const Text("Rider Sign-up",
style: TextStyle(color: Colors.white)),
),
),
This is what it looks like:
答案1
得分: 1
以下是您要翻译的内容：
"由于您的代码无法完全复制，我假设您正在使用 Column 小部件来组织您的屏幕。以下是正确的做法。
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 StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
UnconstrainedBox(
child: Container(
width: 200,
margin: const EdgeInsets.only(left: 100.0, right: 100.0),
child: MaterialButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Scaffold()),
);
},
color: Colors.teal,
child: const Text("Rider Sign-up",
style: TextStyle(color: Colors.white)),
),
),
),
],
);
}
}
我添加了一个额外的小部件 UnConstrainedBox，它是您的 Container 小部件的父级，这将使容器摆脱了 Column 小部件添加给其子项的任何 'Constraineds'。"
英文:
As your code is not completely reproducible. I am assuming you are using Column widget to organiz your screen. Following will be the correct way to do it.
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 StatelessWidget {
@override
Widget build(BuildContext context) {
return
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children :[
UnconstrainedBox(
child:Container(
width:200,
margin: const EdgeInsets.only(left: 100.0, right: 100.0),
child: MaterialButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Scaffold()),
);
},
color: Colors.teal,
child: const Text("Rider Sign-up",
style: TextStyle(color: Colors.white)),
),
),),
]
)
;
}
}
I have added an extra widget UnConstrainedBox that is parent of your Container widget this will make the Container to be free from any 'Constraineds' Column widget adds to its children.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论