7 важных виджетов Flutter, которые должен знать каждый разработчик

Обмен знаниями Flutter # 42

На данный момент я обсудил 41 тему во Flutter. Не могли бы вы просмотреть мои статьи о среде передачи и убедиться, что вы знаете эти темы во Flutter? С моей точки зрения, Flutter на сегодняшний день является наиболее привлекательной и простой в использовании платформой для кроссплатформенной разработки. Разработчики также доказывают это, когда я читал и сравнивая с другими конкурентами Flutter. Главный строительный блок Flutter - это виджеты. Здесь я обсудил десять встроенных виджетов Flutter. Все в приложении организовано в виде дерева виджетов. Вы можете легко понять основы Flutter. Так что виджеты станут более важными, если мы изучим Flutter. Перейдем к следующим виджетам.

Виджет чернильницы

flutter предоставляет виджет чернильницы для добавления анимации ряби, создавая материал прямоугольной формы, реагирующий на прикосновения. Внутри корпуса вы можете добавить любой компонент, и вся эта область будет доступна для прикосновения. Вам нужно использовать цвет, чтобы увидеть эффект ряби при нажатии на чернильницу. Ниже я показываю пример. Flutter имеет несколько встроенных адаптивных виджетов. Это одна из них.

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
  new Material(
      child:InkWell(
        onTap: () {
          setState(() {
            inkwell='Inkwell Tapped';
          });
        },
        onLongPress: () {
          setState(() {
            inkwell='InkWell Long Pressed';
          });
        },
        child: Container(
            color: Colors.transparent,
            width: 200,
            height: 200,
            child: Center(
                child: Text(
                  'Click Here',
                  textScaleFactor: 2,
                  style: TextStyle(fontWeight: FontWeight.bold),
                )
            )
        ),

      ),
    color: Colors.lightBlueAccent,
  ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(inkwell,textScaleFactor: 2,),
      )
    ],
  ),
),

`GestureDetector` Widget

Люди больше обсуждали это с виджетом Inkwell вместе. Жесты определяют то, как мы взаимодействуем с виджетами. Вы можете использовать это, чтобы обнаружить любой жест. Дополнительные сведения об этом можно найти в конструкторе этого класса. В следующем фрагменте кода показано, как обрабатывать жесты.

GestureDetector(
  onTap: () {
    print("Single Tapped");
  },
  onDoubleTap: () {
      print("Double Tapped");
  },
  onVerticalDragDown: (e){
    print(e);
  },
  child: Container(
      color: Colors.transparent,
      width: 200,
      height: 200,
      child: Center(
          child: Text(
            'Click Here',
            textScaleFactor: 2,
            style: TextStyle(fontWeight: FontWeight.bold),
          )
      )
  ),

),

Здесь вызов метода onVerticalDragDown предоставляет подробную информацию о перетаскивании вниз. Это означает, из какой точки в какую точку вы перетаскиваете компонент.

DragDownDetails(Offset(192.7, 354.7))

Виджет RefreshIndicator

При работе с представлениями динамического списка вы должны использовать эти индикаторы обновления для уведомления об изменениях. Ниже я покажу вам полный пример.

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _RefreshIndicator(),
    );
  }
}

class _RefreshIndicator extends StatefulWidget {
  @override
  _PullToRefresh createState() => _PullToRefresh();
}

class _PullToRefresh extends State<_RefreshIndicator> {

  final _data = <String>['1', '2', '3', '4'];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RefreshIndicator'),
      ),
      body: _buildList(),
    );
  }

  Widget _buildList() {
    return RefreshIndicator(
      onRefresh: _refreshData,
      child: ListView.builder(
        padding: EdgeInsets.all(20.0),
        itemBuilder: (context, index) {
          var str = getRandomElement(_data);
          return _buildListItem(str, context);
        },
        itemCount: _data.length,
      ),
    );
  }

  T getRandomElement<T>(List<T> list) {
    final random = new Random();
    var i = random.nextInt(list.length);
    return list[i];
  }

  Widget _buildListItem(String word, BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(word),
      ),
    );
  }

  Future _refreshData() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {

    });
  }

Виджет стека

Это обычное дело, которое мы можем увидеть во Flutter. Часто пользуюсь. Кроме того, это более важно, чем другие. Виджет стека включает в себя множество свойств. Я полностью обсудил это в статье ниже.

Виджет Flutter Stack и свойства с примерами
Обмен знаниями о Flutter №16 medium.com

Виджеты Flutter Clip Image

Flutter представил три типа виджетов для обрезки изображения разных форм и размеров. Это ClipRect, ClipPath, ClipOval. Я обсуждал их в следующих трех здесь. Все они относятся к категории виджетов «Рисование и эффекты».

Виджет ClipRect

Виджет в основном используется для обрезки своего дочернего элемента с помощью прямоугольника. Он будет вырезать прямоугольную часть дочернего виджета следующим образом.

body: Center(
    child: ClipRect(
      child: Align(
        alignment: Alignment.topCenter,
        heightFactor: 0.7,
        child: Image.asset('assets/GEOA.png'),
      ),
    )
),

Виджет ClipRRect

Виджет, который обрезает своего дочернего элемента, используя прямоугольник с закругленными углами.

body: Center(
  child: ClipRRect(
    borderRadius:
    BorderRadius.circular(50),
    child: Image.asset('assets/GEOA.png'),
  ),
)

Виджет ClipPath

Виджет, который обрезает своего дочернего элемента, используя путь.

child: ClipPath(
  clipper: TriangleClipper(),
  child: Image.asset('assets/GEOA.png'),
),
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width/2, 0.0);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }
  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

ClipOval Виджет

Виджет, который обрезает своего дочернего элемента в форме овала или круга.

ClipOval(
  child: Image.asset('assets/GEOA.png'),
  clipper: CircleClip(),
),
class CircleClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 300, 300);
  }

  bool shouldReclip(oldClipper) {
    return false;
  }
}

Заключение

Это 10-й рассказ о встроенных виджетах Flutter. До сих пор я обсуждал 70+ виджетов Flutter и 5 пакетов Flutter.

Эта история дает вам знания о пяти классах Flutter, которые вы должны знать. Не стесняйтесь задавать любой вопрос, с которым вы столкнетесь, в разделе ответов ниже.
Удачного кодирования !!!!
Вы нашли этот пост полезным? Пожалуйста, нажмите кнопку 👏 ниже! :)