Making responsive UI for Flutter mobile according to figma design

Question

Most of the time, a figma design would contains some css style that helps you make a pixel perfect applcation. If I am making a Flutter app, how can I utilize the css style to make a responsive application? For example:

.text{
  line-height: 20px,
  font-size: 16px,
}

.container {
  width: 40px,
  height: 40px,
}
// For the one has no experience in css,
// basically the design contains a text with 20px line height and 16px fontsize, 
// and a container that contains a width and height of 40px.

If the design is based on Iphone13, what is a better solution to make the widgets responsive in all the device, such as iphone13 and iphone se 1st generation? My original thought is to calculate the ratio between the two devices by mediaQuery.of(context).size and multiply all the widgets with the figma design value. But I have no idea to do it on font size and line height. Also it is too annoying to get the device size everytime when I create a widget.

Noted: I know we can use FittedBox to avoid the overflow issue but I want to make every single widgets in Flutter looks the same in every single devices.