I have customTheme which has
我有CustomTheme,有
import 'package:app/core/util/constants.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class CustomTheme {
static getTheme() {
return ThemeData(
textTheme: GoogleFonts.interTextTheme(
const TextTheme(
displayLarge:
TextStyle(fontSize: 57, letterSpacing: 0.25, height: 64),
),
),
primaryColor: AppConstants.gold,
useMaterial3: true);
}
}
main code is like this
主代码如下所示
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: CustomTheme.getTheme(),
debugShowCheckedModeBanner: false,
home: const OnBoardingPage());
}
}
and now I have onboardingpage which has column inside there is text which uses displaylarge.
this guy is causing problem.
现在我有登陆页,里面有列,里面有使用DisplayLarge的文本。这家伙在制造麻烦。
const OnBoardingPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Text("Imagination Meets Intelligence",
style: Theme.of(context).textTheme.displayLarge)
],
),
);
}
}
The error is
错误是
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 2890 pixels on the bottom.
The relevant error-causing widget was:
Column
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
呈现库╞═════════════════════════════════════════════════════════时捕获到══╡异常在布局期间引发以下断言:底部的RenderFlex溢出2890像素。导致错误的相关小部件是:Column溢出的RenderFlex的方向为Axis.Vertical。在渲染中,溢出的RenderFlex的边缘已标记为黄色和黑色条纹图案。这通常是由于内容对于RenderFlex来说太大造成的。考虑应用弹性系数(例如,使用扩展的小部件)来强制RenderFlex的子项适应可用空间,而不是调整到它们的自然大小。这被认为是错误情况,因为它指示存在看不到的内容。如果内容合理地大于可用空间,请考虑在将其放入Flex之前使用ClipRect小部件进行裁剪,或者使用可滚动容器而不是Flex。
What did I try ?
我做了什么尝试?
- I tried wrapping inside Expanded,
- I tried changing the column into listview.
nothing is working why ??????
为什么什么都不管用?
更多回答
Text is too big for the column. Make it a ListView (which is a column plus a scroll)
文本对于该列来说太大了。将其设置为ListView(列加滚动)
Actually no, i am trying it in chrome, so that shouldn't be a problem and I tried your solution error vanishes however my text is not displayed at all
实际上没有,我正在尝试它的Chrome,所以这应该不是一个问题,我尝试了你的解决方案错误消失了,但我的文本根本没有显示
Place a SingleChildScrollView on top of the Column. Ex: SingleChildScrollView(child: Column(children:[Text('text large here')]))
将SingleChildScrollView放在列的顶部。例如:SingleChildScrollView(子项:列(子项:[Text(‘Text Large Here’)])
我是一名优秀的程序员,十分优秀!