Адаптивные виджеты кнопки «Материал» развеваются - PullRequest
Новая
       4

Адаптивные виджеты кнопки «Материал» развеваются

0 голосов
/ 18 марта 2020

Я разработал интерфейс входа в систему. Все работает нормально, но эти две кнопки выглядят не очень хорошо. Myscreen in landscape Я хочу настроить их в соответствии с размером экрана и ориентацией

хочу достичь

Вот мой код для их определения 

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Material(
                        elevation: 15.0,
                        borderRadius: BorderRadius.circular(5.0),
                        color: Color(0xFF0148A4),
                        child: MaterialButton(
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding:
                              EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
                          splashColor: Colors.blueAccent,
                          onPressed: () {
                            /*...*/
                          },
                          child: Row(
                            textBaseline: TextBaseline.alphabetic,
                            children: <Widget>[
                              Icon(
                                FontAwesomeIcons.facebookF,
                                color: Colors.white,
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              Text(
                                'Facebook',
                                textAlign: TextAlign.start,
                                style: TextStyle(
                                  fontSize: 15.0,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 15.0,
                    ),
                    Expanded(
                      child: Material(
                        elevation: 15.0,
                        borderRadius: BorderRadius.circular(5.0),
                        color: Color(0xFFF14436),
                        child: MaterialButton(
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding:
                              EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
                          splashColor: Colors.redAccent,
                          onPressed: () {
                            /*...*/
                          },
                          child: Row(
                            textBaseline: TextBaseline.ideographic,
                            children: <Widget>[
                              Icon(
                                FontAwesomeIcons.google,
                                color: Colors.white,
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              Text(
                                'Google',
                                style: TextStyle(fontSize: 15.0),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

Также кнопка ниже должна быть отзывчивой. Я использую расширенный виджет, но он работает, как показано. Любой другой способ сделать это!

1 Ответ

0 голосов
/ 18 марта 2020

Вы можете попробовать FractionallySizedBox , чтобы установить ширину всего контейнера относительно доступной ширины экрана. Также FittedBox может помочь ограничить виджет для рисования в границах. 

 import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: .8,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: FittedBox(
              fit: BoxFit.fitWidth,
              child: Material(
                elevation: 15.0,
                borderRadius: BorderRadius.circular(5.0),
                color: Color(0xFF0148A4),
                child: MaterialButton(
                  textColor: Colors.white,
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.black,
                  padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                  splashColor: Colors.blueAccent,
                  onPressed: () {
                    /*...*/
                  },
                  child: Row(
                    textBaseline: TextBaseline.alphabetic,
                    children: <Widget>[
                      Icon(
                        Icons.home,
                        color: Colors.white,
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      Text(
                        'Facebook',
                        textAlign: TextAlign.start,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            width: 15.0,
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.fitWidth,
              alignment: Alignment.center,
              child: Material(
                elevation: 15.0,
                borderRadius: BorderRadius.circular(5.0),
                color: Color(0xFFF14436),
                child: MaterialButton(
                  textColor: Colors.white,
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.black,
                  padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                  splashColor: Colors.redAccent,
                  onPressed: () {
                    /*...*/
                  },
                  child: Row(
                    textBaseline: TextBaseline.ideographic,
                    children: <Widget>[
                      Icon(
                        Icons.home,
                        color: Colors.white,
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      Text(
                        'Google',
                        style: TextStyle(fontSize: 15.0),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
...